FCKeditor (II Parte): Dando el Valor Agregado

FCKeditor consta de todas las características que se puede deseear, puede que sea un poco más lento de cargar que el TINY MCE (un par de segundos más), pero como ya lo afirmamos en un post anterior (¿Cuál es el mejor editor Wysiwig On Line?), la ventaja del FCKeditor consiste en su facilidad de subir imágenes, películas flash y archivos al servidor.

Sin embargo, si uno quiere impresionar a un cliente, no podemos mostrar el edtor sin haberlo personalizado primero, hay que darle ese valor agregado, que no nos cuesta mucho, pero que nos diferencia del resto. Este valor agregado es el objetivo de este artículo, en el que vamos a ver como personalizar FCKeditor, a nuestro gusto y con unos simples tips.

Definiendo los Skins

FCKeditor nos birnda 3 skins con los cuales podemos empezar a trabajar, recuerden que no es necesario invertir tanto trabajo en crear un diseño desde cero, cuando ya tenemos algunos listos que podemos modificar.

Los skins son:

• Default
• Office2003
• Silver

Skins que se encuentran dentro de las carpetas de iguales nombres. Por lo que si uno quiere rediseñar los colores de fondo, bordes, dimensiones, etc. Se debe acudir a estas carpetas.

Sin embargo, antes hacer la personalización, debemos elegir el skin de la siguiente manera:

1. Abrir el archivo fckconfig.js, archivo que define el diseño, orden y distribución de los botones del editor, entre otras funciones, desde luego.
2. En la linea 31 del fichero, se encuentra lo siguiente:

3. Recargamos la página donde esta el editor, y vemos como cambia.

Determinando los Botones del Editor

Ubicar los botones del editor en el orden más adecuado, el que nos proporcione mayor comodidad, es algo que realizamos hasta con el propio MS Word. Por lo que es importante definirlo a gusto del cliente.

Nos ubicamos en la línea 69 del mismo archivo fckconfig.js, en esta línea empezamos a definir los botones que irán en el editor (modelo avanzado "default"), ahora si nosotros queremos mostrar sólo algunos botones del editor, (dependiendo del tipo de instalación que hicimos) lo más simple es:

Si la instalación fue con JavaScript

Abrimos el fichero fckeditor.js y en la línea 29 modificamos:

O si fue con PHP

Abrimos el fichero fckeditor.php, y en la línea 39 modificamos la variable ToolbarSet por Basic, en lugar de Default.

Retomando lo dicho, en la línea 69 configuramos el ToolbarSet ‘Default’, las líneas siguientes son las llamadas a los botones, de tal manera que si colocamos el siguiente código

Observando el Resultado

Nuestro editor quedaría de esta manera (Skin: Office2003 personalizado):

Modificar el color del editor, es muy simple, bastando con modificar archivo CSS fckeditor, dentro de la carpeta del skin que hayamos elegido.

Teniendo nuestro editor funcionando y personalizado, finalmente nos falta detallar como activar el sistema para subir ficheros (imagenes) a nuestro server y como predeterminar el css que utilizaremos en nuestra web.