Retain Inline Class and Tags in CKEditor

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.

CODE

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.