Question

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

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

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

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

我正在使用CKEditor 4.10.0。

编辑：更多信息：我一直在跟踪这一事实，因为Indent Block正在应用过滤器转换，从而将边距属性扩展为左边距，左边距，右边距和右边距，但只会在允许的内容（属性）中添加左边距和右边距。结果是，margin-top和margin-bottom属性被认为是不允许的，它使过滤器检查失败，并且“样式”组合隐藏了样式。

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 ”样式没有出现。

已加载的插件列表（所有标准）为：'dialogui，dialog，a11yhelp，dialogadvtab，basicstyles，blockquote，通知，按钮，工具栏，剪贴板，面板按钮，面板，floatpanel，colorbutton，colordialog，模板，菜单，上下文菜单复制格式，div，元素路径，enterkey，实体，查找，列表块，richcombo，字体，水平规则，htmlwriter，所见即所得，缩进，缩进块，缩进，笑脸，调整，列表，列表样式，最大化，粘贴文本，从单词粘贴，打印，删除格式，全选showblocks，showborders，sourcearea，specialchar，stylescombo，选项卡，表，tabletools，表选择，撤消。 JSFiddle上的CDN似乎未加载indentblock插件，因此配置包含在extraPlugins中（否则不会发生此问题，因为该插件未加载）。

Answer 1

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

由于没有一个插件报告过margin-bottom和margin-top样式，但是您仍然想在编辑器中使用它们，因此需要使用extraAllowedContent例如

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的更多信息：

Answer 2

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

我可以追溯到这样的事实，即Indent Block正在应用过滤器转换，该转换将边距属性扩展到左边距，左边距，右边距和右边距，但是仅向允许添加左边距和右边距内容（属性）。结果是，margin-top和margin-bottom属性被认为是不允许的，它使过滤器检查失败，并且“样式”组合隐藏了样式。

在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即可解决问题。

Indentblock CKEditor（4）插件导致包含边距属性的样式不会出现在“样式”组合中

2 个答案: