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

Question

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.

Answer 1

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(*){*}[*]'