Force Ckeditor to Add a Class to P-Tags

Force CKEditor to add a class to p-tags

You can add html processor filter

editor.dataProcessor.htmlFilter.addRules({
    elements :{
        p : function( element ){
            if ( element.className.indexOf("thiny_p") < 0){
                element.className += 'thiny_p';
            }
        }
    }
});

Also, if it is not required to be created as ckedito plugin maybe before you send content to server you can use jQuery to change content

$("iframe", "#cke_editor1").contents().find("p").addClass("tiny_p");

or, if textarea (source) is active

var editor= $("textarea", "#cke_editor1"); 
editor.val(editor.val().replace(/<p>/gi, "<p class='thiny_p'>"))

you should tweak a bit .replace(/<p>/gi, "<p class='thiny_p'>") regular expression to support other cases.

EDIT

Finally got time to download and setup editor on my box, here is working plugin

CKEDITOR.plugins.add( 'customparagraph',
{
    init: function( editor )
    {
        editor.addCommand('addParagraphClassName',{
            exec : function( editor ){    
                var ps = editor.document.$.getElementsByTagName("p");
                for (var i=0; i < ps.length; i++){

                    if(ps[i].className.indexOf("thiny_p") < 0){
                        ps[i].className += "thiny_p";
                    }

                }

            }
        });

        editor.ui.addButton( 'ThinyP',{
            label: 'Appends thiny_p class',
            command: 'addParagraphClassName',
            icon: this.path + 'images/icon.gif'
        });
    }
} );

put it in plugins/customparagraph/plugin.js
also create icon image plugins/customparagraph/images/icon.gif

in configuration you will have to add following configuration options config.js of you CKEdito installation

CKEDITOR.editorConfig = function( config )
{
    config.extraPlugins = "customparagraph";
    config.toolbar = [ [ 'ThinyP' ] ]; // add other toolbars and keep in mid this can be overwritten in page which loads CKEditor
};

OR

in page which loads CKEditor

<script type="text/javascript">
//<![CDATA[
    // Replace the <textarea id="editor1"> with a CKEditor
    // instance, using default configuration.
    CKEDITOR.replace( 'editor1',
        {
            extraPlugins : 'customparagraph',
            toolbar :
            [
                [ 'Bold', 'Italic', '-', 'NumberedList', 'BulletedList', '-', 'Link', 'Unlink' ],
                [ 'ThinyP' ]
            ]
        });
//]]>
</script>

User will have to click on toolbar button before save

Force ckeditor to add a class

Rules should be put in an instanceReady event and you should use hasClass and addClass functions.

editor.on('instanceReady', function(evt) {
    this.dataProcessor.htmlFilter.addRules({
        elements: {
            img: function(element) {
                if (!element.hasClass('Slideshow-Sponsors')) {
                    element.addClass('Slideshow-Sponsors');
                }
            }
        }
    });
});

Add class to a specific parent element in CKEditor

Here's a JSFiddle.

CKEDITOR.addCss('ul.myclass { font-weight: bold; }'); // <-- CSS class declaration

const editor = CKEDITOR.replace('editor', {
    toolbar: [
        { name: 'paragraph', items: [ 'Source', 'BulletedList', 'testButton' ] }
    ],
    extraAllowedContent: 'ul(myclass)' // <-- needed for Advanced Content Filtering (ACF)
});

editor.addCommand("testCommand", {
    exec: function(e) {
        let parents = e.elementPath();
        parents = parents.elements;

        for (let i = 0; i < parents.length; i++) {
          console.log('Check');

          if (parents[i].getName() ==  'ul') {
            console.log('Liste !');
            parents[i].addClass('myclass'); // <-- adds the CSS class
            break;
          }
       }
    }
});

editor.ui.addButton('testButton', {
    label: "Test button",
    command: 'testCommand',
    toolbar: 'insert',
    icon: 'Link'
});

How to add CSS classes and an ID to paragraphs in CKEditor?

Here you go. This code will number your paragraphs with subsequent ids and it also will append a custom class to each paragraph which hasn't been assigned yet.

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;
                    }
                }
            });
        }
    }
});

CKEditor: how to force P within DIV?

You have almost guessed the name of the preference:
http://docs.cksource.com/ckeditor_api/symbols/CKEDITOR.config.html#.forceEnterMode (yes I think that this setting should default to true, but at least we have the option to set it)

CKEditor: Allow span tag inside paragraph

Maybe the span tag is not allowed in your configuration? Then add it like this:

# Allow additional tags
processing:
  allowTags:
    - s
    - span
    - iframe
    - i

EDIT: It seems to be necessary you add the span to extraAllowedContent:

editor:
  config:
    extraAllowedContent:
      - span

And much more important, to prevent empty tags to become stripped away:

processing:
  HTMLparser_db:
    tags:
      span:
        rmTagIfNoAttrib: false

---

Related Topics