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

// Cargamos nuestro archivo de datos que contiene los datos de los botones a pintar y las etiquetas css
CKEDITOR.scriptLoader.load(CKEDITOR.plugins.getPath('pluginTest')+'data.js');

// Creamos el plugin
CKEDITOR.plugins.add('pluginTest', {
    init: function (editor) {
       // Le decimos donde estan la ruta de los iconos para los botones
       var path = CKEDITOR.plugins.getPath('pluginTest')+'images/';
       // Recorremos los datos para ir generando los iconos que venga en data.js
        for (name in data){
            // Creamos un boton usando nuestra clase MyButton
            var boton = new MyButton(editor,name,data[name].text,data[name].command,path+data[name].icon,data[name].group,data[name].type,data[name].tag,data[name].style);
             editor.ui.addButton('Label_'+name,boton.getButton());
        }
    }   
});

function showMyDialog(oEditor,type,tag,clase) {
    // cogemos el texto seleccionado
    var mySelection = oEditor.getSelection();
    if (CKEDITOR.env.ie) {
        mySelection.unlock(true);
        selectedText = mySelection.getNative().createRange().text;
    } else {
        selectedText = mySelection.getNative();
    }   

    // Sacamos el elemento que contiene la seleccion
    var element= oEditor.getSelection().getStartElement();
    var elementoContenedor = element.getName();

    // Solo si viene texto se pondra el tag
    if (selectedText!=""){
        // Para evitar poner etiquetas anidadas repetidas <h2><h2></h2></h2>
        if (elementoContenedor!=tag){
            oEditor.insertHtml('<'+tag+' class="'+clase+'">'+selectedText+'</'+tag+'><br>');    
        }else{
            // Asi podemos quitar la etiqueta si ya estaba
            element.getParent().setHtml(selectedText);
        }
    }   
}

function MyButton(editor,s_name,s_label,s_command,s_icon,s_toolbar,type,tag,style){
    this.name = s_name;
    this.boton = new CKEDITOR.ui.button({name:s_name,label:s_label,command:s_command,icon:s_icon,toolbar:s_toolbar});
    editor.addCommand(s_command, { exec: function(editor) {showMyDialog(editor,type,tag,style); }});
}
EKButton.prototype.getButton=function(){ return this.boton;}
EKButton.prototype.getName=function(){ return this.name;}

 

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

var data=
 {
 h2:{
   text:'Crear h2', // Texto al poner el raton por encima del icono
   command:'idH2', // Identificador unico del boton
   icon:'icon1.png', // Nombre del icono png
   group:'grupo1', // Grupo al que pertenece (para agrupar botones similares)
   tag:'h2', // Tag html que queremos que se añada al pulsar el boton (span, div, etc)
   style:'css_1'}, // El class del css que queremos que añada (sera class="css_1" por ej)
 span:{
   text:'Crear span', // Texto al poner el raton por encima del icono
   command:'idSpan', // Identificador unico del boton
   icon:'icon1.png', // Nombre del icono png
   group:'grupo1', // Grupo al que pertenece (para agrupar botones similares)
   tag:'span', // Tag html que queremos que se añada al pulsar el boton (span, div, etc)
   style:'css_2'}, // El class del css que queremos que añada (sera class="css_1" por ej)

};

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

config.extraPlugins = 'pluginText'; // Si hubiera varios plugins deberan ir seguidos por comas

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

Votos totales: 344