Plugin "Insertar HTML" para FCKEditor

Hace ya bastante tiempo que utilizo el editor WYSIWYG FCKEditor y de siempre me ha parecido una herramienta excepcional. En este artículo voy a desarrollar un plugin que utilizo y que me ha venido muy bien para muchos proyectos. Este plugin es muy simple, un botón para que el usuario pueda pegar un HTML y que se inserte donde tenga puesto el cursor. La razón es que para usuarios no acostumbrados a HTML, explicarles que para, p.e. enlazar con un mapa de google, tienen que pulsar sobre el botón Fuente HTML y localizar la ubicación en el código HTML y pegar allí el código de Google Maps es, en muchos casos, imposible.

Puedes descargar los códigos de este post aquí.

1. El Objetivo
El objetivo es conseguir lo siguiente, un botón en el editor que al pulsarse muestre la ventana de insertar HTML:




2. Ficheros necesarios
Lo primero es conocer la estructura para crear un plugin para FCKEditor. En realidad es muy simple, necesitaremos crear una carpeta en el directorio /editor/plugins (en este caso insertarHtml es el nombre de la carpeta) del FCKEditor que contenga los siguientes ficheros:

1. fckplugin.js: fichero javascript en el que se definen las propiedades del plugin: formato de la ventana a mostrar, icono, nombre del plugin, ...
2. insertarHtml.png: imagen para el icono del botón en el FCKEditor.
3. insertarHtml.php: página que se muestra al pulsar el botón. En este caso es PHP pero puede ser perfectamente HTML o ASPX o lo que se quiera.

Finalmente, necesitamos dar de alta el plugin en el fichero fckconfig.js que está en el directorio raiz del FCKEditor. Vamos a ir viendo paso a paso cada uno de los ficheros.

3. fckplugin.js
En este fichero se configuran los datos generales del plugin. Lo primero es registrar el comando:

FCKCommands.RegisterCommand( 'Insertar_Html', new FCKDialogCommand( 'Insertar código HTML', 'Insertar código HTML', FCKConfig.PluginsPath + 'insertarHtml/insertarHtml.php', 400, 400 ) ) ;

Indicamos qué página se abre en la nueva ventana, el tamaño de la ventana, el nombre que aparece en la ventana, etc. Lo siguiente es crear el botón:

var oHTMLItem        = new FCKToolbarButton( 'Insertar_Html', 'Insertar código HTML en la posición del cursor' ) ;
oHTMLItem.IconPath    = FCKConfig.PluginsPath + 'insertarHtml/insertarHtml.png' ;

y finalmente, registramos el elemento:

FCKToolbarItems.RegisterItem( 'Insertar_Html', oHTMLItem ) ;

4. insertarHtml.php
En el fichero insertarHtml.php es donde se genera la acción. Es la pantalla que se llama cuando el usuario pulsa sobre el botón. La página tiene una parte de presentación HTML y otra de código PHP. La primera parte es:


Es importante la parte inicial de javascript que es la que coge la referencia al FCKEditor que ha llamado a esta ventana. La parte de código es la que se ejecuta cuando se pulsa sobre el botón btnInsertar:


Lo que hacemos es generar el código javascript que inserta el código HTML en la posición del cursor y lo pasamos a la variable codigoJavascript, de la que se hace un echo en la parte HTML. Seguidamente, cerramos la ventana y volvemos a la pantalla del FCEditor.

5. fckconfig.js
Lo último es dar de alta el botón en la toolbar de nuestro FCKEditor y utilizarlo. Para ello tenemos que modificar el fichero fckconfig.js que se encuentra en el directorio raiz del FCKEditor. Lo primero que tenemos que hacer es añadir el plugin:

FCKConfig.Plugins.Add( 'insertarHtml' ) ;

y finalmente, incluir el comando en la toolbarset que estemos utilizando. Yo, p.e., he incluido el botón en la toolbarset default, al final:

FCKConfig.ToolbarSets["Default"] = [
    ['Source','DocProps','-','Preview','-','Templates'],
    ['Cut','Copy','Paste','PasteText','PasteWord','-','Print'],
    ['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'],
    '/',
    ['FontFormat','FontSize'],
    ['TextColor','BGColor'],
    ['FitWindow','ShowBlocks','-','Insertar_Html']
];

6. Conclusión
Este plugin es muy sencillo pero muy útil para aquellos proyectos en los que el usuario del FCKEditor no tiene conocimientos de HTML pero quiere incluir código de otras webs como pueden ser VIMEO, YouTube, Google Maps, Facebook. Cada día es más normal enlazar HTML en nuestras páginas y este plugin nos facilita la tarea.

Ejemplo: copio la localización de mi pueblo en google maps en la pantalla del plugin:

Al pulsar sobre Insertar HTML, se inserta el código donde tengo colocado el cursor:



Espero que os haya gustado este artículo. En breve más...