noviembre 16, 2009 4

Tutorial de CKEditor. Parte I.

By in JavaScript, Librerías

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.

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

Tags: , , , ,

4 Responses to “Tutorial de CKEditor. Parte I.”

  1. 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.

  2. toni dice:

    Hola, en primer lugar mil gracias por esta web, la acabdo de descubrir y ya esta en mis favoritostengo una cuetion sobre el campo <textarea> si instalo el editor ckeditor y sustituyo al <textarea> a la hora de subir la informacion con un formulario a mi base de datos mysql, me da error, he comprobado (haciendo mil pruebas) que el problema son las “comillas” que inserta el ckeditor en el texto enriquecido, no se porque extraña razon la base de datos no le gustan las comillas, y me da error de sql.gracias por tu ayuda.TOni

  3. Alex dice:

    Hola Manuel, muy bueno tu articulo. Tengo un problemilla con CKEditor. El tema es ke acabo de instalarlo despues de mucho tiempo usando FCKEditor y en la configuracion no me permite escoger una opcion de Toolbar (Basic – Advanced – Full), simplemente me manda ara el inicio de esa misma pagina de config. Puedes darme algun tip? Seguramente es una tonteria, pero despues de mucho probar no he dado en el clavo.Gracias

  4. Pepa dice:

    Hola, estoy probando fckEditor y cuando lo integro, en lugar de salir el menú con los botones de edición de texto/imagen, me sale la página web… totalmente funcional además … ¿podrías ayudarme?Gracias

Leave a Reply