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


Well .. not sure if you need that for some specific reason .. but wouldn't life be much easier if you do what you want to do at the display end?

Like if I display some text (saved from ckeditor) at the front end, display in something like a

<div class="ckcontent" > ... </div>

And all

 <p>

tags within it can be applied styles or applied jquery by the notation:

 .ckcontent p { margin-left:5px;........ }

OR

 $('.ckcontent p').addClass('ckparagraphs');

Tags:

Css

Ckeditor