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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Indentblock CKEditor插件导致包含margin属性的样式不会出现在Styles组合中相关的知识,希望对你有一定的参考价值。

如果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-bottommargin-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的更多信息:

另一答案

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

我追溯到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添加到允许的内容可以解决问题。

以上是关于Indentblock CKEditor插件导致包含margin属性的样式不会出现在Styles组合中的主要内容,如果未能解决你的问题,请参考以下文章

新版CKeditor七牛云插件修改

第三方插件

CKEditor 和 C# Web API,使用简单的上传插件上传图片

ckeditor 插件

Django cms 文本编辑器 (CKEditor) 插件

Django Ckeditor 的 Youtube 插件已更新