Retain Inline Class and Tags in CKEditor

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.

Batoi Research Group Aug 31, 2016 Facebook Twitter LinkedIn Pinterest

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

For example create a div in CKEditor.

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

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.

Need our assistance? We are available.

Learn More About Our Platform?
Schedule a Demo
An Existing Customer?
Get Support
Want Managed Service?
Request for a Quote
Report an Error