How to add CSS classes and id to paragraphs in CKEditor?

Question

How to add custom classes or identifier in text paragraphs in CKEditor? I would like to load possible classes from the database and write them to any list in which they will be when CKE loads. The identifier will simply be made in place. Classes and identifiers will be used for such things as marking a piece of text as a footnote or inscription.

---

To be clear, I don’t want to change the visible style of the text using the drop-down lists, I want to add CSS classes that can be used to style the element. After it has been saved - depending on where it is located b.

Answer 1

Here you go. This code will contain your paragraphs with subsequent identifiers, and will also add a custom class to each paragraph that has not yet been assigned.

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 no class, assing the custom one: if ( !element.attributes.class ) element.attributes.class = pClass; // It there 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

I walked around and did something like this (I am using 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'); } });