class - CKEditor automatically strips classes from div

Question

I am using CKEditor as a back end editor on my website. It is driving me round the bend though as it seems to want to change the code to how it sees fit whenever I press the source button. For example if I hit source and create a <div>...

<div class="myclass">some content</div>

It then for no apparent reason strips the class from the <div>, so when I hit source again it has been changed to...

<div>some content</div>

I presume this irritating behaviour can be turned off in the config.js, but I have been digging and cant find anything in documentation to turn it off.

Answer 1

Disabling content filtering

The easiest solution is going to the config.js and setting:

config.allowedContent = true;

(Remember to clear browser's cache). Then CKEditor stops filtering the inputted content at all. However, this will totally disable content filtering which is one of the most important CKEditor features.

Configuring content filtering

You can also configure CKEditor's content filter more precisely to allow only these element, classes, styles and attributes which you need. This solution is much better, because CKEditor will still remove a lot of crappy HTML which browsers produce when copying and pasting content, but it will not strip the content you want.

For example, you can extend the default CKEditor's configuration to accept all div classes:

config.extraAllowedContent = 'div(*)';

Or some Bootstrap stuff:

config.extraAllowedContent = 'div(col-md-*,container-fluid,row)';

Or you can allow description lists with optional dir attributes for dt and dd elements:

config.extraAllowedContent = 'dl; dt dd[dir]';

These were just very basic examples. You can write all kind of rules - requiring attributes, classes or styles, matching only special elements, matching all elements. You can also disallow stuff and totally redefine CKEditor's rules. Read more about:

• Content filtering in CKEditor – why do you need content filter.
• Advanced Content Filter – in deep description of the filtering mechanism.
• Allowed content rules – how to write allowed content rules.