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.

Apophyge

I found the solution after much digging, if you go into config.js and set CKEDITOR.config.allowedContent = true; it stops the editor messing around with things then. – Apophyge

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.

Apophyge

This will disable the feature. Better to configure than to disable. – Magnetic

@lain Simpson: You still need to set this question as answered. Thx btw for finding the solution :D – Fusspot

Sometimes this solution is working, sometimes it doesn't. The style attribute gets removed, only sometimes, the rest stays. – Longfaced

I'm working with something called Kentico, which uses this editor. I've added the line "CKEDITOR.config.allowedContent = true;" to my config.js, but it is still reformatting my HTML, which breaks my Bootstrap code, anyone have any ideas? – Hoboken

@Tom.Bowen89 Maybe check your scoping? Within the CKEDITOR.editorConfig = function( config ) {...} block, you should remove the CKEDITOR part and just have 'config.allowedContent=true;'. Or put it outside the {...} block. – Lachrymatory

I was having trouble with a new install of CKEditor 4.x removing some DIVs and embedded YouTube videos in existing content. (CKEditor was new to this project, previously it was raw html in a textarea). Using this setting allowed me to workaround that and preserve the extra content, while still using the CKEditor interface. So thanks! – Necroscopy

Useful, formatted, with references and straight to the point; a big +1 for this top quality answer – Mastership

for multiple elements, note that the CKEditor docs say "elements - a list of space-separated element names..." but they need to be semi-colon separated as in the third example above or some of the other answers. an example for allowing div, p, and any style attribute with specified properties: config.extraAllowedContent = 'div; p; *{text-align, font-size, color, margin, padding, display, width, height}' – Imbed

i am adding config.allowedContent = true;, in config.js but still not working – Sabotage

can anybody please tell me how to do it in angular 7+ – Tenenbaum

Answer 2

I found a solution.

This turns off the filtering, it's working, but not a good idea...

config.allowedContent = true;

To play with a content string works fine for id, etc, but not for the class and style attributes, because you have () and {} for class and style filtering.

So my bet is for allowing any class in the editor is:

config.extraAllowedContent = '*(*)';

This allows any class and any inline style.

config.extraAllowedContent = '*(*);*{*}';

To allow only class="asdf1" and class="asdf2" for any tag:

config.extraAllowedContent = '*(asdf1,asdf2)';

(so you have to specify the classnames)

To allow only class="asdf" only for p tag:

config.extraAllowedContent = 'p(asdf)';

To allow id attribute for any tag:

config.extraAllowedContent = '*[id]';

etc etc

To allow style tag (<style type="text/css">...</style>):

config.extraAllowedContent = 'style';

To be a bit more complex:

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

Hope it's a better solution...

Doityourself

also see ckEditor docs for extraAllowedContent – Mantooth

Answer 3

Edit: this answer is for those who use ckeditor module in drupal.

I found a solution which doesn't require modifying ckeditor js file.

this answer is copied from here. all credits should goes to original author.

Go to "Admin >> Configuration >> CKEditor"; under Profiles, choose your profile (e.g. Full).

Edit that profile, and on "Advanced Options >> Custom JavaScript configuration" add config.allowedContent = true;.

Don't forget to flush the cache under "Performance tab."

Spermatophore

This answer is for drupal only ... but anyway thanks, because I was just looking for a drupal solution. – Brierwood

@Brierwood interesting. I can't remember why I thought this question was related to drupal, but seems it has helped drupal guys. – Spermatophore

Answer 4

Since CKEditor v4.1, you can do this in config.js of CKEditor:

CKEDITOR.editorConfig = function( config ) {
  config.extraAllowedContent = '*[id](*)';  // remove '[id]', if you don't want IDs for HTML tags
}

You can refer to the official documentation for the detailed syntax of Allowed Content Rules

Accommodative

There is a syntax error you had above. Specifically style attributes must be set with curly braches {} instead of parens () – Supercilious

Hi kamelkev, my answer is for classes, not for styles, as per the question. Basically, that's what I'm using, and I don't think it has an error. – Accommodative

Thanks for the answer, your *[id](*) did the trick, i tried *[id,class] before, but that doesn't allow the class attribute somehow. CKeditor docs are a bit like a maze. – Jovitta

+1 Understanding the content rules is probably a better solution than disabling all filtering, as many of the other answers suggest. – Hattie

Answer 5

if you're using ckeditor 4.x you can try

config.allowedContent = true;

if you're using ckeditor 3.x you may be having this issue.

try putting the following line in config.js

config.ignoreEmptyParagraph = false;

Macfarlane

config.ignoreEmptyParagraph=false; is the only solution that worked for me, out of all the answers I have tried. Thank you. – Welltimed

Answer 6

This is called ACF(Automatic Content Filter) in ckeditor.It remove all unnessary tag's What we are using in text content.Using this command in your config.js file should be turn off this ACK.

config.allowedContent = true;

Alundum

Answer 7

Following is the complete example for CKEDITOR 4.x :

HTML

<textarea name="post_content" id="post_content" class="form-control"></textarea>

SCRIPT

CKEDITOR.replace('post_content', {
   allowedContent:true,
});

The above code will allow all tags in the editor.

For more Detail : CK EDITOR Allowed Content Rules

Proto

Answer 8

Please refer to the official Advanced Content Filter guide and plugin integration tutorial.

You'll find much more than this about this powerful feature. Also see config.extraAllowedContent that seems suitable for your needs.

Magnetic

Answer 9

If you use Drupal AND the module called "WYSIWYG" with the CKEditor library, then the following workaround could be a solution. For me it works like a charm. I use CKEditor 4.4.5 and WYSIWYG 2.2 in Drupal 7.33. I found this workaround here: https://www.drupal.org/node/1956778.

Here it is: I create a custom module and put the following code in the ".module" file:

<?php
/**
 * Implements hook_wysiwyg_editor_settings_alter().
 */
function MYMODULE_wysiwyg_editor_settings_alter(&$settings, $context) {
  if ($context['profile']->editor == 'ckeditor') {
    $settings['allowedContent'] = TRUE;
  }
}
?>

I hope this help other Drupal users.

Relations

Answer 10

I found that switching to use full html instead of filtered html (below the editor in the Text Format dropdown box) is what fixed this problem for me. Otherwise the style would disappear.

Rase

Answer 11

I would like to add this config.allowedContent = true; needs to be added to the ckeditor.config.js file not the config.js, config.js did nothing for me but adding it to the top area of ckeditor.config.js kept my div classes

Oodles

Answer 12

Another option if using drupal is simply to add the css style that you want to use. that way it does not strip out the style or class name.

so in my case under the css tab in drupal 7 simply add something like

facebook=span.icon-facebook2

also check that font-styles button is enabled

Dempster

Answer 13

I face same problem on chrome with ckeditor 4.7.1. Just disable pasteFilter on ckeditor instanceReady.This property disable all filter options of Advance Content Filter(ACF).

 CKEDITOR.on('instanceReady', function (ev) {
        ev.editor.pasteFilter.disabled = true;
    });

Strawn