Sign Up

Sign Up to our social questions and Answers Engine to ask questions, answer people’s questions, and connect with other people.

Have an account? Sign In

Have an account? Sign In Now

Sign In

Login to our social questions & Answers Engine to ask questions answer people’s questions & connect with other people.

Sign Up Here

Forgot Password?

Don't have account, Sign Up Here

Forgot Password

Lost your password? Please enter your email address. You will receive a link and will create a new password via email.

Have an account? Sign In Now

You must login to ask a question.

Forgot Password?

Need An Account, Sign Up Here

Please briefly explain why you feel this question should be reported.

Please briefly explain why you feel this answer should be reported.

Please briefly explain why you feel this user should be reported.

Sign InSign Up

The Archive Base

The Archive Base Logo The Archive Base Logo

The Archive Base Navigation

  • SEARCH
  • Home
  • About Us
  • Blog
  • Contact Us
Search
Ask A Question

Mobile menu

Close
Ask a Question
  • Home
  • Add group
  • Groups page
  • Feed
  • User Profile
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Buy Points
  • Users
  • Help
  • Buy Theme
  • SEARCH
Home/ Questions/Q 6755883
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Editorial Team
Asked: May 26, 20262026-05-26T13:27:22+00:00 2026-05-26T13:27:22+00:00

I must configure CKEditor to add a class-attribute to every p-tag in the content.

  • 0

I must configure CKEditor to add a class-attribute to every p-tag in the content. You can do something similar with config.format_p but it will only apply the class-attribute to text that is marked as "normal" which is not default.

Edit:
I’m using the current version 3.6.2. Here are the relevant parts of my config:

CKEDITOR.editorConfig = function( config )
{   
    config.removeFormatTags = 'b,div,big,code,del,dfn,em,font,i,ins,kbd,q,samp,small,span,strike,strong,sub,sup,tt,u,var,form,input,textarea';

    config.format_p =
    {
        element: 'p',
        attributes:
        {
            'class': 'tiny_p'
        }
    };
    config.skin = "office2003";
    config.entities_processNumerical = true;
}

The config.format_p option only takes effect when user chooses "normal" from format-menu and config.removeFormatTags only works when user manually clicks the clean-button. Both should work automatically like it does in TinyMCE.

  • 1 1 Answer
  • 0 Views
  • 0 Followers
  • 0
Share
  • Facebook
  • Report

Leave an answer
Cancel reply

You must login to add an answer.

Forgot Password?

Need An Account, Sign Up Here

1 Answer

  • Voted
  • Oldest
  • Recent
  • Random
  1. Editorial Team
    Editorial Team
    2026-05-26T13:27:22+00:00Added an answer on May 26, 2026 at 1:27 pm

    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

    • 0
    • Reply
    • Share
      Share
      • Share on Facebook
      • Share on Twitter
      • Share on LinkedIn
      • Share on WhatsApp
      • Report

Sidebar

Related Questions

Must be missing something really obvious here but how do you change the size
I have a Red Hat Linux box that I did not configure but must
I must configure my RoR vps hosting for my rails app, but on my
There must be a simple solution to this problem but for the love of
This must be a duplicate. But with so many NSPredicate questions out there, I
I must be doing something wrong here. I'm trying to use Google Analytics to
How can I configure Drupal 6 to work with gmail IMAP? These are the
Short question: If I have class that impelemnts FactoryBean interface, how can I get
I'd like to configure a process that looks something like: Method Call -> Dynamic
I am using hibernate.properties to configure my hibernate connection to mysql. But I need

Explore

  • Home
  • Add group
  • Groups page
  • Communities
  • Questions
    • New Questions
    • Trending Questions
    • Must read Questions
    • Hot Questions
  • Polls
  • Tags
  • Badges
  • Users
  • Help
  • SEARCH

Footer

© 2021 The Archive Base. All Rights Reserved
With Love by The Archive Base

Insert/edit link

Enter the destination URL

Or link to existing content

    No search term specified. Showing recent items. Search or use up and down arrow keys to select an item.