¿Cómo agregar clases de CSS y una ID a los párrafos en CKEditor?

Question

¿Cómo agregaría clases personalizadas o una ID a los párrafos de texto en CKEditor? Me gustaría cargar las clases posibles de DB y escribirlas en la lista en la que estarían cuando se cargue CKE. Los ID simplemente se inventarían en el acto. Las clases y los ID se usarían para marcar un texto como una nota al pie o un pie de foto.

---

Para que quede claro, no quiero cambiar el estilo visible el texto utilizando los cuadros desplegables, quiero añadir clases CSS que se pueden utilizar para el estilo del elemento Después de que se ha guardado -dependiendo en donde se usa.

Answer 1

Aquí tienes. Este código numerará tus párrafos con identificadores posteriores y también agregará una clase personalizada a cada párrafo que aún no se haya asignado.

var idCounter = 0, 
    pClass = 'myCustomClass', 
    pClassRegexp = new RegExp(pClass, 'g'); 

CKEDITOR.replace('editor1', { 
    on: { 
     instanceReady: function() { 
      this.dataProcessor.htmlFilter.addRules({ 
       elements: { 
        p: function(element) { 
         // If there's no class, assing the custom one: 
         if (!element.attributes.class) 
          element.attributes.class = pClass; 

         // It there's some other class, append the custom one: 
         else if (!element.attributes.class.match(pClassRegexp)) 
          element.attributes.class += ' ' + pClass; 

         // Add the subsequent id: 
         if (!element.attributes.id) 
          element.attributes.id = 'paragraph_' + ++idCounter; 
        } 
       } 
      }); 
     } 
    } 
}); 

Answer 2

he dado la vuelta y hecho algo como esto (estoy usando CKeditor 4.4.7):

editor.addCommand('colSm1', { 
    exec: function (editor) { 
    var $element = editor.elementPath().block; 

    if ($element.getAttribute('class') == null) { 
     $element.addClass('col-sm-1'); 
    } 
});