CKeditor 自定义插件 allowedContent 不起作用

Question

我正在创建一个自定义插件以允许编辑 itemprop 属性。 它工作得很好，只是在重新加载时属性会被剥离。 知道我做错了什么吗？

我阅读了可以在文档中找到的所有内容，包括以下示例：https://github.com/ckeditor/ckeditor-docs-samples/blob/master/tutorial-abbr-acf/abbr/plugin.js#L24

如果我禁用 ACF，它会起作用。

export default CKEDITOR => {
    CKEDITOR.plugins.add('itemprop', {
        init(editor) {
            editor.addCommand('itemprop', new CKEDITOR.dialogCommand('itempropDialog', {
                allowedContent: '*[itemprop]'
            }));

            CKEDITOR.dialog.add('itempropDialog', editor => {
                return {
                    title: 'Itemprop',
                    contents: [
                        {
                            id: 'tab-main',
                            label: 'Itemprop',
                            elements: [
                                {
                                    type: 'text',
                                    id: 'itemprop',
                                    label: 'Itemprop',
                                    setup(element) {
                                        this.setValue(element.getAttribute('itemprop'));
                                    },
                                    commit(element) {
                                        element.setAttribute('itemprop', this.getValue());
                                    }
                                }
                            ]
                        }
                    ],
                    onShow() {
                        const selection = editor.getSelection();
                        const element = selection.getStartElement();
                        this.element = element;
                        this.setupContent(this.element);
                    },
                    onOk() {
                        this.commitContent(this.element);
                    }
                };
            });
        }
    });
};

Answer 1

我怀疑它可能与 CKEditor 中的这个错误有关：https://github.com/ckeditor/ckeditor-dev/issues/678。

我做了一个简单的测试，当我在工具栏上添加一个按钮时，你的代码就开始工作了。还允许带有itemprop 条目的内容开始显示在 CKEditor 允许的过滤器中，而无需在编辑器配置中定义它。这就是为什么最简单的解决方案是在插件中添加一个按钮：

editor.ui.addButton( 'itemprop', {
  label: 'Item Prop',
  command: 'itemprop'
});

整个插件定义如下：

CKEDITOR.plugins.add('itemprop', {
  init(editor) {

    editor.ui.addButton( 'itemprop', {
      label: 'Item Prop',
      command: 'itemprop'
    });

    editor.addCommand('itemprop', new CKEDITOR.dialogCommand('itempropDialog', {
      allowedContent: '*[itemprop]'
    }));

    CKEDITOR.dialog.add('itempropDialog', editor => {
      return {
        title: 'Itemprop',
        contents: [
          {
            id: 'tab-main',
            label: 'Itemprop',
            elements: [
              {
                type: 'text',
                id: 'itemprop',
                label: 'Itemprop',
                setup(element) {
                  this.setValue(element.getAttribute('itemprop'));
                },
                commit(element) {
                  element.setAttribute('itemprop', this.getValue());
                }
              }
            ]
          }
        ],
        onShow() {
          const selection = editor.getSelection();
          const element = selection.getStartElement();
          this.element = element;
          this.setupContent(this.element);
        },
        onOk() {
          this.commitContent(this.element);
        }
      };
    });
  }
});

这里的工作示例：https://codepen.io/msamsel/pen/RjbOpP?editors=1010