Comment ajouter des classes CSS et un ID aux paragraphes dans CKEditor?

Question

Comment ajouter des classes personnalisées ou un ID aux paragraphes de texte dans CKEditor? Je voudrais charger les classes possibles à partir de DB et les écrire à n'importe quelle liste qu'elles seraient dedans pendant que CKE est chargé. Les pièces d'identité seraient simplement fabriquées sur place. Les classes et les ID seraient utilisés pour des choses comme marquer un morceau de texte comme une note de bas de page ou une légende.

---

Pour être clair, je ne veux pas changer le style visible le texte en utilisant les listes déroulantes, je veux ajouter des classes CSS qui peuvent être utilisés pour le style de l'élément après qu'il a été enregistré -Selon là où il est utilisé.

Answer 1

C'est parti. Ce code numérotera vos paragraphes avec les identifiants suivants et ajoutera également une classe personnalisée à chaque paragraphe qui n'a pas encore été attribué.

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

Je suis allé autour et fait quelque chose comme ça (j'utilise 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'); 
    } 
});