Indentblock CKEditor插件导致包含margin属性的样式不会出现在Styles组合中

Posted 2021-04-11

如果stylesSet中的样式使用margin属性，则无法将其添加到样式组合。

删除缩进块插件可以解决问题。

但为什么？这是插件中的错误，还是编辑器库中的其他地方或我的配置？

其他样式 - 不使用margin属性 - 出现在组合中。

我正在使用CKEditor 4.10.0。

编辑：更多信息：我追踪到Indent Block正在应用过滤器转换，将保证金属性扩展到margin-left，margin-top，margin-right和margin-bottom这一事实，但只增加了margin-left和margin-right允许内容（属性）。结果是margin-top和margin-bottom属性被认为是不允许的，它没有通过过滤器检查，Styles组合隐藏了样式。

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>

如果上面的代码片不起作用，这里有一个JSFiddle：https://jsfiddle.net/DandyAndy/xpvt214o/729425/

结果是“H1无边距”样式出现在样式组合中，但“H1 with margin”样式不出现。

加载的插件列表（所有标准）是：'dialogui，dialog，a11yhelp，dialogadvtab，basicstyles，blockquote，notification，button，toolbar，clipboard，panelbutton，panel，floatpanel，colorbutton，colordialog，templates，menu，contextmenu，copyformatting， DIV，elementspath，enterkey，实体发现，listblock，richcombo，字体，了Horizo​​ntalRule，的htmlWriter，wysiwygarea，缩进，indentblock，indentlist，笑脸，证明，列表，liststyle，最大化，pastetext，pastefromword，打印，removeformat，全选，showblocks， showborders，sourcearea，specialchar，stylescombo，制表符，表，tabletools，tableselection，撤消”。 JSFiddle上的CDN似乎没有加载indentblock插件，因此配置包含在extraPlugins中（否则问题不会发生，因为该插件不加载）。

答案

CKEditor使用高级内容过滤器（ACF），它基本上允许您决定在编辑器中使用哪些标签，属性，样式和CSS类。默认情况下，插件会将他们想要使用的内容报告给ACF。

由于没有一个插件报告了margin-bottom和margin-top样式，但你仍然想在编辑器中使用它们，你需要使用extraAllowedContent手动扩展ACF，例如

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

或者如果要将该样式分配给更多元素，可以使用：

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

还请看看你的工作小提琴：https://jsfiddle.net/9tLyn3rx/4/

您可以通过以下链接了解有关ACF的更多信息：

• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_acf.html
• https://docs.ckeditor.com/ckeditor4/latest/guide/dev_advanced_content_filter.html
• https://ckeditor.com/docs/ckeditor4/latest/guide/dev_disallowed_content.html
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-allowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-extraAllowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html#cfg-disallowedContent
• https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_filter.html#method-addTransformations

另一答案

首先，我不确定这是否是“答案”。似乎是一个错误，但是我的配置中可能缺少某些东西来使其工作（例如添加到允许的内容，尽管我认为插件应该管理自己允许的内容）。

我追溯到Indent Block正在应用过滤器转换这一事实，它将保证金属性扩展到margin-left，margin-top，margin-right和margin-bottom，但只将margin-left和margin-right添加到允许的内容（属性） ）。结果是margin-top和margin-bottom属性被认为是不允许的，它没有通过过滤器检查，Styles组合隐藏了样式。

在plugins / indentblock / plugin.js中：

在各种元素上注册splitMarginShorthand转换（包括我在我的例子中使用的h1）：

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

但它只允许margin-left,margin-right允许的内容：

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
    }
};

删除转换，或将margin-top,margin-bottom添加到允许的内容可以解决问题。