Tutorial de CKEditor. Parte I.

Hace ya bastante tiempo se comenzó en este blog un tutorial sobre FCKEditor, uno de los muchos editores WYSIWYG que hay, pero se dejó abandonado. Varias fueron las razones, principalmente la falta de tiempo y la salida de CKEditor.

Después de un tiempo en el tintero, y gracias a un comentario de un lector, me he decidido a comenzar un tutorial introductorio a CKEditor. Puede servirnos como introducción el artículo “Probando CKEditor” donde se da un vistazo rápido a esta herramienta.

Lo primero que vamos a ver es como configurar nuestro editor. Para ello tenemos tres opciones:

Definir la configuración al crear el editor.
Usar el archivo config.js para colocar la configuración en este.
Crear nuestro propio archivo de configuración.

Definir la configuración al crear el editor:

Cuando creamos una instancia del editor con el método replace podemos indicarle la configuración de este. De esta forma nos evitamos tener que tocar la instalación del editor. Veamos como se haría:

CKEDITOR.replace( 'editor1',
    {
        toolbar : 'Basic',
        uiColor : '#9AB8F3'
    });

Hay que tener en cuenta que lo que se pasa a la función es la definición literal de un objeto, por lo que tendremos que usar la sintaxis parametro : valor, y tener cuidado de no usar el símbolo “igual que” (=).

Usar el archivo config.js para colocar la configuración:

Si editamos el archivo config.js, en la misma carpeta donde está ckeditor.js, veremos que hay una función llamada CKEDITOR.editorConfig. Dentro de esta tendremos que colocar los valores de configuración que deseemos.

CKEDITOR.editorConfig = function( config )
{
    config.language = 'fr';
    config.uiColor = '#AADC6E';
};

Definir la configuración en nuestro propio archivo:

En este caso nos crearemos un archivo donde colocaremos la configuración. De esta forma no tenemos que modificar la instalación de CKEditor y támpoco tendremos que tocar nuestras páginas, tan solo el archivo de configuración. Dentro de él definiremos la función CKEDITOR.editorConfig, podemos por ejemplo copiar el config.js como base, y luego indicaremos al editor donde se encuentra este archivo de la siguiente manera:

CKEDITOR.replace( 'editor1',
    {
        customConfig : '/custom/ckeditor_config.js'
    });

Conclusiones:

Como hemos podido ver el editor nos ofrece varias formas para configurarlo, dependiendo de nuestras necesidades o nuestros gustos. Personalmente me gusta más la tercera, aunque cada cual es libre de hacerlo a su manera.

Espero que esta primera parte les haya sido de ayuda pues esta es la base para customizar nuestro editor. Hasta la próxima entrega del tutorial, que espero pueda tenerla lista para el miércoles.