Home » Support » Help Articles » Retain Inline Class and Tags in CKEditor

Retain Inline Class and Tags in CKEditor

Back to Help Articles Home

CKEditor automatically strips the style classes when toggled between source view and HTML view.

For example create a div in CK Editor.

<div class="newclass">My Content</div>

CKEditor strips the class from the <div>, so when you hit source again it will changed to.

<div>My Content</div>

This behavior is caused by the 'Advanced Content Filter' present in the CKEditor. This behavior can be turned off in the config.js.

The easiest method is to add the following code in config.js.

config.allowedContent = true;

The code mentioned above removes the filtering. However, it works only for attributes with 'id'. For attributes with style and classes, you should add different code. To allow style, class and other attributes in CKEditor, add the following codes to config.js along with the code mentioned above.

  1. Allow any class and style in CKEditor.

    config.extraAllowedContent = '*(*)';

  2. Allow only class=”newclass”.

    config.extraAllowedContent = '*(newclass)';

  3. Allow class="newclass" only for p tag.

    config.extraAllowedContent = 'p(newclass)';

  4. Allow 'id' attribute only.

    config.extraAllowedContent = '*[id]';

  5. Allow style tag (<style type="text/css">...</style>).

    config.extraAllowedContent = 'style';

  6. Allow for all attributes.

    config.extraAllowedContent = '*[id];*(*);*{*};p(*)[*]{*};div(*)[*]{*};li(*)[*]{*};ul(*)[*]{*};span(*)[*]{*};table(*)[*]{*};td(*)[*]{*}';

Remember to clean the browser's cache to see it work. The codes above will completly disable the content filtering in CKEditor.

Updated on Aug 31, 2016

The techReview is an online magazine by Batoi and publishes articles on current trends in technologies across different industry verticals and areas of research. The objective of the online magazine to provide an insight into cutting-edge technologies in their evolution from labs to market.

Visit techReview

English - IN (USD)
New Users? Signup.     Existing Users? Login.