Come aggiungere classi CSS e un ID ai paragrafi in CKEditor?

Question

Come aggiungerei classi personalizzate o un ID ai paragrafi di testo in CKEditor? Vorrei caricare le classi possibili da DB e scriverle in qualsiasi elenco si trovino nel momento in cui viene caricato CKE. Gli ID sarebbero semplicemente inventati sul posto. Le classi e gli ID sarebbero usati per cose come segnare un pezzo di testo come una nota a piè di pagina o una didascalia.

---

Giusto per essere chiari, io non voglio cambiare lo stile visibile il testo utilizzando le caselle a discesa, voglio aggiungere classi CSS che possono essere utilizzati per lo stile l'elemento Dopo che è stato salvato -A su dove è usato.

Answer 1

Ecco qui. Questo codice numererà i tuoi paragrafi con ID successivi e aggiungerà anche una classe personalizzata a ciascun paragrafo che non è stato ancora assegnato.

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

sono andato in giro e fatto qualcosa di simile (sto 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'); 
    } 
});