Indentblock CKEditor (4) plugin causes styles containing margin property not to appear in Styles combo

0
votes

If a style in stylesSet uses the margin property it fails to be added to the Styles combo.

Removing the Indent Block plugin resolves the problem.

But why? Is this a bug in the plugin, or elsewhere in the editor library, or with my configuration?

Other styles - not using the margin property - appear in the combo.

I am using CKEditor 4.10.0.

EDIT: More info: I tracked it down to the fact that Indent Block is applying filter transformations which expand margin property into margin-left, margin-top, margin-right and margin-bottom, but only adds margin-left and margin-right to allowed content (properties). The result is that the margin-top and margin-bottom properties are deemed not allowed, it fails the filter check, and the Styles combo hides the style.

var config = {
  "stylesSet": [{
      "name": "H1 with margin",
      "element": "h1",
      "styles": {
        "margin": "0"
      }
    },
    {
      "name": "H1 without margin",
      "element": "h1",
      "styles": {
        "font-weight": "bold"
      }
    }
  ],
  "extraPlugins": "indentblock"
};

CKEDITOR.replace("editor", config);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/ckeditor/4.10.0/ckeditor.js"></script>
<div id="editor"></div>

In case the above snippet doesn't work, there is a JSFiddle here: https://jsfiddle.net/DandyAndy/xpvt214o/729425/

The result is that the "H1 without margin" style appears in the Styles combo but the "H1 with margin" style does not.

The list of plugins loaded (all standard) are: 'dialogui,dialog,a11yhelp,dialogadvtab,basicstyles,blockquote,notification,button,toolbar,clipboard,panelbutton,panel,floatpanel,colorbutton,colordialog,templates,menu,contextmenu,copyformatting,div,elementspath,enterkey,entities,find,listblock,richcombo,font,horizontalrule,htmlwriter,wysiwygarea,indent,indentblock,indentlist,smiley,justify,list,liststyle,maximize,pastetext,pastefromword,print,removeformat,selectall,showblocks,showborders,sourcearea,specialchar,stylescombo,tab,table,tabletools,tableselection,undo'. The CDN on JSFiddle seems to not load the indentblock plugin, so the config has that included in extraPlugins (otherwise the problem doesn't occur because that plugin doesn't load).

2
ckeditorckeditor4.x

2 Answers

1
votes

CKEditor uses Advanced Content Filter (ACF) which basically allows you deciding which tags, attributes, styles and CSS classes can be used inside the editor. By default plugins report content they want to use to ACF.

Since none of the plugins have reported margin-bottom and margin-top styles but you still want to use them inside the editor, you need to extend the ACF manually using extraAllowedContent e.g.

CKEDITOR.replace("editor", {
extraAllowedContent : 'h1{margin-top,margin-bottom}'
});

or if you want to assign that style to more elements, you can use:

CKEDITOR.replace("editor", {
extraAllowedContent : 'div h1 h2 h3 h4 h5 h6 ol p pre ul{margin-top,margin-bottom}'
});

Please also have a look at your working fiddle: https://jsfiddle.net/9tLyn3rx/4/

You can learn more about ACF by visiting below links:

0
votes

Firstly, I don't know for sure if this is the "answer". Seems to be a bug, but perhaps something is missing from my configuration to make this work (such as adding to allowed content, though I would argue a plugin should manage its own allowed content).

I tracked it down to the fact that Indent Block is applying filter transformations which expand margin property into margin-left, margin-top, margin-right and margin-bottom, but only adds margin-left and margin-right to allowed content (properties). The result is that the margin-top and margin-bottom properties are deemed not allowed, it fails the filter check, and the Styles combo hides the style.

In plugins/indentblock/plugin.js:

Registers the splitMarginShorthand transformation on various elements (including h1 which I used in my example):

this.contentTransformations = [
    [ 'div: splitMarginShorthand' ],
    [ 'h1: splitMarginShorthand' ],
    [ 'h2: splitMarginShorthand' ],
    [ 'h3: splitMarginShorthand' ],
    [ 'h4: splitMarginShorthand' ],
    [ 'h5: splitMarginShorthand' ],
    [ 'h6: splitMarginShorthand' ],
    [ 'ol: splitMarginShorthand' ],
    [ 'p: splitMarginShorthand' ],
    [ 'pre: splitMarginShorthand' ],
    [ 'ul: splitMarginShorthand' ]
];

But it only allows margin-left,margin-right in allowed content:

this.allowedContent = {
    'div h1 h2 h3 h4 h5 h6 ol p pre ul': {
    // Do not add elements, but only text-align style if element is validated by other rule.
        propertiesOnly: true,
        styles: !classes ? 'margin-left,margin-right' : null,
        classes: classes || null
    }
};

Removing the transformations, OR adding margin-top,margin-bottom to the allowed content resolves the issue.