Integración del Editor Ckeditor

Ckeditor es un editor web de tipo WYSIWYG, este término ya lo explicamos en un anterior artículo. Ckeditor es la versión más actual del editor FCkeditor y es el editor web más versátil y configurable a mi modo de ver.

A continuación explicaremos como integrarlo en nuestros proyectos de la manera más sencilla.

Vea una foto del editor a continuación:



Es importante aclarar que si usted usa algún CMS o framework , estos pasos puede que no sean válidos o necesarios , por ejemplo si usa Joomla , todos estos pasos se realizan con la simple instalación de una extensión con el CKeditor , y luego habilitas como editor WYSIWYG predeterminado el CKeditor. Hecha esta aclaración continuamos con la explicación:

Pasos habilitar el editor:

1- Descárgalo de internet o adquirirlo por alguna otra vía.
2- Descomprimirlo y colocarlo en algún lugar de su directorio web
3- Colocar un textarea en el formulario de nuestra web donde queramos insertarlo
4- Colocar una referencia desde nuestra pagina a el componente Ckeditor.
5- Colocar los códigos correspondientes para cargar el editor, con la configuración que deseemos



Paso 1: Descárgalo de internet o adquirirlo por alguna otra vía.

Este componente es totalmente gratuito, puede ser descargado desde su página web oficial: http://ckeditor.com .

Paso 2: Descomprimirlo y colocarlo en algún lugar de su directorio web.


Descomprima el archivo y cópielo en algún lugar que tenga destinado para ello en su directorio web.
En el caso nuestro, tenemos una carpeta llamado Componentes, en el cual copiamos todos los componentes o bibliotecas que externas que utilizamos.




Paso 3: Colocar un textarea en el formulario de nuestra web donde queramos insertarlo

Ponga en su formulario un campo de tipo textarea donde usted desee que aparezca el editor.
Vea un ejemplo de textarea:


<textarea name="txtContenido" cols="50" rows="30" id="textarea"></textarea>


Paso 4: Colocar una referencia desde nuestra pagina a el componente Ckeditor.

Dede poner una referencia de tipo Javascript , al archivo llamado ckeditor.js , que se encuentra en la raíz de la carpeta del editor.
A continuación el código de enlace:


<script type="text/javascript" src="../Componentes/ckeditor/ckeditor.js"></script>

Es muy recomendado que esta referencia sea una referencia absoluta y no relativa, la razón es que su luego cambias de directorio o usas URL amigables tendrás que cambiar la esta dirección relativa por otra, y esto no ocurre con un dirección absoluta. Este código puede ir en cualquier sitio pero es recomendado que vaya en el head, junto con todas las otras referencias Javascript , CSS, etc.


Paso 5: Colocar los códigos correspondientes para cargar el editor, con la configuración deseada.

Si usted es curioso de seguro ya entro en la carpeta ckeditor , y se fijo que hay una carpeta dentro llama _samples , la cual contiene ejemplos de integración.
Vea la figura de abajo con la carpeta _samples



Un forma muy sencilla de cargar el editor en el textarea y a la ves configurarlo es por reemplazo de código. A continuación un ejemplo y luego explico:

<script type="text/javascript">

CKEDITOR.replace( ' txtContenido ' );

</script>

Con este codigo hemos mandado a reemplazar el textarea con nombre: txtContenido ,por el editor y su configuración por defecto.
Este código debe ir después de colocar el código del textarea , o en el evento window.onload , en el head del documento.

Sin embargo si queremos un poco que personalizar nuestro editor , colocar algunas de las herramientas , quitar otras , disponer de la posición de las mismas , entre otras cosas, entonces podemos hacer algo como esto:


<span style="font-style:italic;"><script type="text/javascript">

CKEDITOR.replace( ' txtContenido ',

{

toolbar : [

['Source','DocProps','-','Save','NewPage','Preview','-','Templates'],

['Cut','Copy','Paste','PasteText','PasteWord','-','Print','SpellCheck'],

['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],

'/',

['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],

['OrderedList','UnorderedList','-','Outdent','Indent','Blockquote','CreateDiv'],

['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],

['Link','Unlink','Anchor'],

['Image','Flash','Table','Rule','Smiley','SpecialChar','PageBreak'],

'/',

['Style','FontFormat','FontName','FontSize'],

['TextColor','BGColor']

]

} );

</script>


En este ejemplo acomodamos la barra de herramientas a nuestro gusto, a través del arreglo: toolbar , este mismo ejemplo usted puede tomarlo probarlo , quitar y/o modificar los valores y posiciones que se pasan a toolbar.


¿Cómo configurar otros aspectos del Editor?

Reamente el editor es tan configurable que necesitaremos otros artículos para explicarlo todo.
Si embargo no quiero terminar el artículo sin referirme al archivo de configuración y citar algún ejemplo.
El archivo de configuración de llama config.js , y esta en la raíz de la carpeta del ckeditor.
En dicho fichero vera un código como este:

CKEDITOR.editorConfig = function( config )
{
// Cambiar aquí la configuración
};



Dentro del mismo pueden cambiar las configuraciones. Por ejemplo para cambiar el idioma a español (debe ser un idioma soportado) puede colocar la siquiente línea:

config.language = 'es';

Los idiomas puedes verlos en la carpeta llamada lang
Para forzar a que todo lo que se copie en el componente se convierta en texto plano:

config.forcePasteAsPlainText = true;


Espero que te sea útil este modesto artículo, estamos a la espera de cualquier comentario o sugerencia.