Configurar un plugin en CKEditor con javascript

tutorial ckeditor drupal plugin

En el artículo Cómo crear un plugin de CKEditor os explicábamos cómo crear un plugin de CKEditor desde cero. Surgió la posibilidad de configurarlo pero lo dejamos para más adelante. Ahora es el momento de mostraros cómo se puede configurar el plugin para que saque unos iconos u otros dependiendo de los datos que se le pasen.

Primer paso: Modificar el plugin.js

Debemos modificar el plugin.js para que sólo muestre los iconos que se le pasen. Hay que añadir un if que marco con ****** y una funcion nueva

// 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){
/**************************** NUEVO **********************************/
           if (in_array(name,editor.config.buttonsPluginTest)){
/**************************** FIN NUEVO **********************************/
            // 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());
/*************************** NUEVO ***********************************/
            }
/*************************** FIN NUEVO ***********************************/
        }
    }   
});

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);
        }
    }   
}
/*************************** NUEVO ***********************************/
function in_array(needle, haystack) {for(var i in haystack) {if(haystack[i] == needle) return true; }return false;}
/*************************** FIN NUEVO ***********************************/

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;}

Luego hay que añadir al config.js los botones que queremos que nos saque. La lista nombres de botones que le pongamos tiene que ser un subconjunto de la de data.js:

// PAra mostrar el boton de h2 y el de span
config.buttonsPluginTest = Array("h2","span");

// PAra mostrar el boton de h2 solo
config.buttonsPluginTest = Array("h2");

El archivo data.js sería algo parecido a esto:

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)

}

 

Votos totales: 147