Question

我正在实现一个与simplebox示例非常相似的新窗口小部件，所以我正在尝试先做这项工作。

在本教程中，据说指定allowedContent足以包含我们需要的其他元素，类和样式，因此不会过滤掉它。在主编辑器配置中我有

div(simplebox);

这成功启用了小部件但是，如果我切换到源并返回到wysiwyg，内部div中的内容 - “simplebox-content”将被删除，并且小部件不再正常工作。我没有更改simplebox的代码。

我在这里做错了吗？

Answer 1

在Simplebox插件中查看小部件定义：

editor.widgets.add( 'simplebox', {
    // Allow all HTML elements, classes, and styles that this widget requires.
    // Read more about the Advanced Content Filter here:
    // * http://docs.ckeditor.com/#!/guide/dev_advanced_content_filter
    // * http://docs.ckeditor.com/#!/guide/plugin_sdk_integration_with_acf
    allowedContent:
        'div(!simplebox,align-left,align-right,align-center){width};' + 
        'div(!simplebox-content); h2(!simplebox-title)',

    // Minimum HTML which is required by this widget to work.
    requiredContent: 'div(simplebox)',

    ...
} );

它表示要运行的窗口小部件的最小 requiredContent为div(simplebox)。通过＆＃34; minimal＆＃34;，这意味着它将运行但具有一组有限的功能。

这正是您设置config.allowedContent = 'div(simplebox)'时的情况。如果将其与窗口小部件定义中的allowedContent属性进行比较，您会注意到默认情况下，窗口小部件的注册次数远远超过编辑器过滤器中的注册次数，例如.align-left，{{1 .align-right的{{1}}和.align-center类，.simplebox-content，<div>和.simplebox-title类。设置<h2>后，您将覆盖窗口小部件定义的规则，如果某些元素/类因此而被禁止，则窗口小部件的结构会被缩小＆＃34;就像描述的那样

[...]里面的东西就像内部div的类 - ＆＃34; simplebox-content＆＃34;被删除，小部件不再正常工作

所以长话短说：当你自己定义config.allowedContent时，你要对编辑器功能的形状负责，你必须了解后果。只有当您包含Simplebox定义中的所有规则时，您才会享受小部件的全部功能。

Answer 2

我遇到了同样的问题。我做的是我在editables变量中添加了这样的类：

editables: {
  content: {
    selector: '.static-gray-box',
    allowedContent: 'h5(first-child,last-child);h6(first-child,last-child);p(first-child,last-child)'
  }
},

在CKEditor中为小部件指定allowedContent

2 个答案: