Jak dodać klasy CSS i identyfikator do akapitów w CKEditorze?

Question

Jak dodać niestandardowe klasy lub identyfikator do akapitów tekstowych w CKEditorze? Chciałbym załadować możliwe klasy z DB i zapisać je na dowolnej liście, w której się znajdują, podczas ładowania CKE. Identyfikatory będą po prostu składane na miejscu. Klasy i identyfikatory będą używane do oznaczania fragmentów tekstu jako przypisów lub podpisów.

---

Żeby było jasne, nie chcę zmieniać Widoczna Styl tekstu za pomocą pól rozwijanych, chcę dodać klas CSS, które mogą być używane do stylu elementu Po to zostało zapisane -depending w którym jest używany.

Answer 1

Proszę bardzo. Ten kod będzie numerował twoje akapity z kolejnymi identyfikatorami, a także doda klasę niestandardową do każdego akapitu, który nie został jeszcze przypisany.

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

Poszedłem się i zrobić coś takiego (używam 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'); 
    } 
});