Indentblock CKEditor(4)插件导致包含margin 属性的样式不出现在Styles combo中

Question

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

删除 Indent Block 插件解决了这个问题。

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

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

我正在使用 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 without margin”样式出现在样式组合中，但“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,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'。 JSFiddle 上的 CDN 似乎没有加载 indentblock 插件，因此配置包含在 extraPlugins 中（否则不会出现问题，因为该插件未加载）。

Answer 1

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

我追踪到 Indent Block 正在应用过滤器转换，将边距属性扩展为 margin-left、margin-top、margin-right 和 margin-bottom，但只添加 margin-left和允许的内容（属性）的边际权利。结果是 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 可解决问题。

Answer 2

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

由于 none 的插件报告了 margin-bottom 和 margin-top 样式，但您仍想在编辑器中使用它们，因此您需要使用 [=14] 手动扩展 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}'
});

也请看看你的工作fiddle：https://jsfiddle.net/9tLyn3rx/4/

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

Indentblock CKEditor(4)插件导致包含margin 属性的样式不出现在Styles combo中

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

ckeditor

ckeditor4.x