Javascript – CKEditor stripping out div class, despite it being specified in extraAllowedContent

ckeditorjavascript

CKEditor is stripping out div CLASS attributes when I switch to/from Source view.

This is the configuration:

$('.cke-editor-restrictive').ckeditor({
    extraAllowedContent: [
        "*[class,id]",
        "a[*]",
        "img[*]",
        "strong", "em", "small",
        "u", "s", "i", "b",
        "p", "blockquote[class,id]",
        "div[class,id,data-href]",
        "ul", "ol", "li",
        "br", "hr",
        "h1", "h2", "h3", "h4", "h5", "h6",
        "script[src,charset,async]",
        "iframe[*]", "embed[*]", "object[*]",
        "cite", "mark", "time",
        "dd", "dl", "dt",
        "table", "th", "tr", "td", "tbody", "thead", "tfoot"
    ].join("; ")
})

And the global CKEditor config:

CKEDITOR.editorConfig = function(config) {
  config.extraPlugins = 'mediaembed,codemirror,autosave';
  config.codemirror = { ... };

  config.toolbar = [['Bold', 'Italic', 'Underline', "RemoveFormat"], ['NumberedList', 'BulletedList', 'Blockquote'], ['Link', 'Unlink', 'Image', 'MediaEmbed'], ['Find', 'Paste'], ['Source', 'Maximize']];

  config.bodyClass = 'ckeditor-body';
  config.contentsCss = "/assets/application.css";
  config.baseHref = "http://www.website.org/";
  config.forcePasteAsPlainText = true;
};

What am I missing? I've been over the documentation for Allowed Content Rules and it doesn't seem like I'm doing anything wrong. Even if I change the rule to div[*] it strips out the class.

Best Answer

Classes and styles are not handled together with other attributes. They have their own place in ACF rules. To enable all styles you would write:

'div{*}'

And to enable all classes:

'div(*)'

And to enable everything:

'div(*){*}[*]'
Related Topic