Crear un plugin en CKEditor con javascript

tutorial ckeditor drupal plugin

CKEditor es un editor WYSIWYG muy potente para integrar en nuestros campos <textarea> de los formularios de nuestra web. Gracias a él podremos meter negritas, cursivas, headings, etc.

El editor CKEditor tiene una posibilidad muy potente que consiste en crear plugins (y descargarlos) para mejorarlo. En nuestro caso voy a explicar como crear un plugin que genere tags html con etiqueta "class". Es decir, crearemos un botón en el editor que al seleccionar un texto y al pulsar el botón nos ponga genere algo como esto: <span class="estilo1">Texto seleccionado</span>. Además, si seleccionamos el texto y volvemos a pinchar el botón nos pintará el texto sin la etiqueta, es decir, se quedará: "Texto seleccionado"

Pasos previos para el plugin de CKEDITOR

Necesitamos descargar el editor WYSIWYG CKEditor: Descargar CKEditor

No voy a explicar cómo se instala, porque es simplemente descomprimir.

Creación del plugin de CKEditor

Creamos un directorio dentro del directorio plugins del CKEditor y lo llamamos como queramos (por ejemplo: pluginTest), ahi abrimos un archivo llamado plugin.js

El contenido de nuestro plugin.js será el que pongo debajo con comentarios para aclarar las dudas

 

El plugin.js hace uso de un archivo llamado data.js, que es el que tiene los botones que queremos añadir y lo que queremos que haga cada botón

El archivo data.js

Luego en el archivo config.js del CKEditor tenemos que añadir nuestro plugin:

Con esto ya tendríamos nuestro plugin creado. Podríamos mejorarlo para que los botones a mostrar fueran configurables desde un array. Eso lo describimos en el artículo sobre cómo configurar el plugin de CKEditor