This website uses cookies in order to offer you the most relevant information and services online. Please accept cookies for optimal performance.
Learn More

Retain Inline Class and Tags in CKEditor

Aug 31, 2016

CKEditor is a rich text editor which enables writing content directly inside of web pages or online applications. Its core code is written in JavaScript and it is developed by CKSource.

retain-inline-class-and-tags

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

For example create a div in CK Editor.

My Content


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

My Content

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.

Allow any class and style in CKEditor.

config.extraAllowedContent = '*(*)';

Allow only class=”newclass”.

config.extraAllowedContent = '*(newclass)';

Allow class="newclass" only for p tag.

config.extraAllowedContent = 'p(newclass)';

Allow 'id' attribute only.

config.extraAllowedContent = '*[id]';

Allow style tag ().

config.extraAllowedContent = 'style';

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 completely disable the content filtering in CKEditor.

PHP Application Framework
Batoi Framework is a PHP application framework with an Integrated Development Environment for Next Generation Apps and Services on the Cloud.
Create your web application without worrying about small things.
Give your feedback to improve the article

Need our assistance? We are available with you.

Existing Customer?
Get Support
Talk To Consultant?
Get An Appointment
Contact Us

Batoi global offices and contact details

Stay Connected

Join our community, newsletters, and social media.