noviembre 18, 2009 18

Tutorial de CKEditor. Parte II.

By in JavaScript, Librerías

En la primera parte del tutorial vimos las distintas formas de configurar CKEditor. Hoy vamos a ver como configurar la barra de herramientas.

Para configurar la barra de herramientas tenemos dos formas:

  • Asignar a la propiedad toolbar una definición de la barra de herramientas.
  • Crear una propiedad toolbar_name con la definición de la barra de herramientas y posteriormente asignar a la propiedad toolbar el literal ‘name’.

Vamos a ver un ejemplo, con el segundo método, de creación de una barra de herramientas:

config.toolbar = 'Full';

config.toolbar_Full =
[
    ['Source','-','Save','NewPage','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
    ['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
    ['Form', 'Checkbox', 'Radio', 'TextField', 'Textarea', 'Select', 'Button', 'ImageButton', 'HiddenField'],
    '/',
    ['Bold','Italic','Underline','Strike','-','Subscript','Superscript'],
    ['NumberedList','BulletedList','-','Outdent','Indent','Blockquote'],
    ['JustifyLeft','JustifyCenter','JustifyRight','JustifyBlock'],
    ['Link','Unlink','Anchor'],
    ['Image','Flash','Table','HorizontalRule','Smiley','SpecialChar','PageBreak'],
    '/',
    ['Styles','Format','Font','FontSize'],
    ['TextColor','BGColor'],
    ['Maximize', 'ShowBlocks','-','About']
];

Con esto definimos una barra de herramientas muy completa. Como vemos la barra de herramientas es un array donde cada elemento es o bien un array o bien el literal ‘/’. Si el elemento es un array cada elemento es un botón. Si en lugar de un array nos encontramos con el carácter ‘/’ este fuerza un salto en la barra de herramientas, es decir nos crea una nueva barra debajo de la anterior.

Dentro de la definición de cada uno de los bloques de botones podemos encontrar el identificador de cada uno de los botones o el carácter ‘-‘ que nos crea un espacio en blanco.

La definición de la barra de herramientas debe ir en el archivo de configuración, o bien en el por defecto o en uno propio, explicado en el artículo anterior.

Podemos si lo queremos crear la barra de herramientas al crear la instancia de esta forma:

CKEDITOR.replace( 'editor1',
    {
        toolbar :
        [
            ['Styles', 'Format'],
            ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About']
        ]
    });

Como se puede ver es bastante sencillo configurar la barra de herramientas a nuestro gusto. Si teneis alguna duda intentaré resolverla en los comentarios.

Comparte esta entrada:
Delicious Digg Google Technorati Menéame Fresqui Reddit Facebook Twitter Yahoo! Buzz MySpace Email BarraPunto

Tags: , , , ,

18 Responses to “Tutorial de CKEditor. Parte II.”

  1. caos30 dice:

    Pues la verdad es que me ha ido de perlas tu breve pero transparente artículo. Precisamente a raíz de tus 2 artículos anteriores sobre ckeditor instalé ayer este editor en mi CMS.

    Y justamente venía pensando que para editar pequeños cuadros de textos en los que el formato necesario es mínimo (apenas negritas y viñetas) (para plantillas de emails HTML o mensajes de respuesta automática o error) ckeditor quedaba demasiado “grande”: demasiado pesado para cargar y demsiado espacio en pantalla (demasiados botones).

    Hasta ahora vengo utilizando STeditor (7kb comprimido!!! http://www.gosu.pl/STEditor) que para esa función viene de perlas!! y además muestra el código fuente usando funciones nativas del javascript. Pero tal vez, después de leer este artículo, en algunas partes del administrador del CMS reduciré el número de botones del editor!

    Gracias!
    SERGI R.

  2. caos30 dice:

    Jejeje, ni que decir tiene que después años trabajando en esto he probado de todoooooooo!!!!

    El útlimo “gran editor” que utilicé fue Xinha (http://trac.xinha.org) muy en la línea de CKeditor. Es decir, una maquinaria completa, personalizable, opensource…. pero pesada! aunque no tantos como otros (TinyMCE podía conmigo… era lentísimo de cargar hace unos dos años, no sé si lo habrán mejorado).

    En fin, que para el que lea esto y se esté estrenando en el tema de escoger editores… hay que saber que hay bastante donde escoger aunque todavía no he encontrado el editor perfecto.

    De hecho, la posibilidad que explicas en el artículo de reducir la botonera del editor, estaría genial si redujera también los archivos javascript a cargar. Pero creo que sigue cargando el mismo ckeditor.js que son 269Kb !!! joder, eso es una pasada!!! quiero decir, que comparado con los 12k de STEditor… es un dinosaurio!!!!

    Y ya no te digo el volumen de espacio en disco duro que ocupa! más de 5Mb !!!! tuve que limpiar los skins que no utilizo y los idiomas que no voy a utilizar. Y aún así sigue en más de 3Mb… joder, si mi CMS ocupa practicamente lo mismo!!! no sé… ya entiendo que un editor HTML es una APLICACIÓN EN SÍ MISMA… pero.. como digo hay editores bastante menos pesados.

    SERGI

  3. caos30 dice:

    Por cierto, por si alguien no conoce, Xinha, también tiene un addon para FireFox que está genial: te instalas el addon (o haces que tu cliente se instale el addon -es gratis), y con él puedes editar cualquier “textarea” que quieras con el editor WYSIWYG xinha, sin necesidad de descargarlo nunca más! y además siempre está actualizado. Esta también es pues una muy buena opción!!

    os dejo el enlace:
    https://addons.mozilla.org/es-ES/firefox/addon/1449?id=1449

    Un saludo!
    SERGI

  4. Muchas gracias por la información, tendré que probar esos editores.

    STeditor me ha parecido una maravilla, muy ligero y tiene las opciones más habituales.

    El editor que más he usado es TinyMCE, tiene algunas opciones que me gustan bastante pero siempre hay que estar abierto a nuevas opciones.

  5. charles dice:

    hola amigo
    me gustaria que hicieras un tutorial de como activar la pestaña para cargar la imagenes al servidor..

  6. charles dice:

    hola amigo
    me gustaria que hicieras un tutorial de como activar la pestaña para cargar la imagenes al servidor. pues yo tengo la vesion anterior y puedo subir la imagenes al servidor y con este no pero he visto en la sitio web donde esta el demo y si esta activa esta funcion.

  7. Pues voy a mirarlo porque puede ser interesante.

  8. manumaf dice:

    Genio! no sabes todo lo que me ayudo esto :)

  9. Me alegro que te haya sido de utilidad.

  10. Daniel dice:

    Hola amigo, bueno resulta que todo me sale bien, hasta lo ultimo de este paso…al pegar el codigo:CKEDITOR.replace( 'editor1', { toolbar : [ ['Styles', 'Format'], ['Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', '-', 'About'] ] });al config.js de ckedito. Todo sigue igual (es decir con TODAS las opciones, cuando solo deberia haber algunas no?Espero con ansias tu ayuda :)

  11. Daniel dice:

    Porcierto este es mi codigo, haber si algo esta mal escrito: /*Copyright (c) 2003-2010, CKSource – Frederico Knabben. All rights reserved.For licensing, see LICENSE.html or http://ckeditor.com/license*/CKEDITOR.editorConfig = function( config ){    config.language = ‘es’;    config.uiColor = ‘#336’;    };CKEDITOR.replace( ‘editor1’,    {        customConfig : ‘/custom/ckeditor_config.js’    });CKEDITOR.replace( ‘editor1’,    {        customConfig : ‘/custom/ckeditor_config.js’    });CKEDITOR.replace( ‘editor1’,    {        toolbar :        [            [‘Styles’, ‘Format’],            [‘Bold’, ‘Italic’, ‘-‘, ‘NumberedList’, ‘BulletedList’, ‘-‘, ‘Link’, ‘-‘, ‘About’]        ]    });MUCHAS GRACIAS :)

  12. Daniel dice:

    Ya solucione el problema, practicado, de todos modos muchas gracias, y muchas gracias por los tutoriales :)

  13. Fede dice:

    Hola a todos, estuve probando el CKEditor, y esta muy bueno, la consulta es como puedo asignar el value de CkEditor. mediante un Script. a una variable.cualquier sugerencia desde ya gracias!Fede.-

  14. […] necesario, bastaba con añadir el botón Templates a la barra de herramientas, como vimos en la segunda parte del tutorial. Vemos que hay una nueva propiedad (templates_files). Esta propiedad es un array en el que […]

  15. legion1978 dice:

    Hola.Hay alguna manera de kitarle por completo el skin al CKEditor? Me explico: solo deseo capturar los retornos de linea del textarea, sin barra de herramientas ni nada adicional?gracias!!

  16. CTRLALT164 dice:

    tengo funcionando una carga de div’s con ajax, y dentro de uno de ellos he puesto el CKEDITOR, pero no coge la libreria, pues recarga solamente el div.Podrías explicar como implementarlo con ajax?Un saludo, un tutorial increible!,

  17. Amigo una pregunta. Al rato de subir una imagen, donde se graba, en la base de datos o en el servidor? y en que direccón está?  por tu ayuda muchas gracias.

  18. Isabel dice:

    Tengo un pagina con varios div en ella, en uno de ellos pongo el ckeditor, el problema es que cuando recargo el div ( por que no hace refresh a toda la pagina solo al div) ya no lo carga, me podrian decir que hago para que se siga viendo??

Leave a Reply