Indentblock CKEditor（4）插件导致包含margin属性的样式不会出现在Styles组合中-Java 学习之路

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

删除 Indent Block 插件可解决此问题 .

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

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

我正在使用CKEditor 4.10.0 .

EDIT ：更多信息：我追溯到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 " style appears in the Styles combo but the " H1带边距”样式没有 .

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

2 回答

1
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的更多信息：
回复于 2024-05-16T00:35:44+08:00
0
首先，我不确定这是否是“答案” . 似乎是一个错误，但是我的配置中可能缺少某些东西来使其工作（例如添加到允许的内容，尽管我认为插件应该管理自己允许的内容） .

我追溯到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 添加到允许的内容可解决此问题 .
回复于 2024-05-16T00:35:44+08:00

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

2 回答

相关问题