ckeditor5

Question

我正在尝试创建一个 CKEditor5 自定义元素插件 - 主要用于自定义 format/styles -- 嵌套 div 等。设法能够 inject/format 元素，我可以输入它们.但是，如果我尝试将文本复制并粘贴到自定义元素中，则会出现过多的递归错误。

MyWidget 插件：

export default class MyWidgetPlugin extends Plugin {

  init() {

    const editor = this.editor;

    editor.model.schema.register('my-widget', {
      inheritAllFrom: '$root',
      isLimit: true,
    });

    editor.conversion.elementToElement({ model: 'my-widget', view: 'my-widget' });
    editor.commands.add('myWidget', new MyWidgetCommand(editor));

  }

}

MyWidget 命令：

class MyWidgetCommand extends Command {

  execute() {

    const editor = this.editor;
    const block = first(this.editor.model.document.selection.getSelectedBlocks());

    this.editor.model.change(writer => {

      const myWidget = writer.createElement('my-widget')
      writer.insert ( myWidget, block, 'after');
      writer.appendElement( 'paragraph', myWidget );

    });

  }

}

插入小部件会将其注入编辑器：

<my-widget>
  <p></p>
</my-widget>

而且我可以正常打字，但不能粘贴。我猜我弄错了架构...尝试了很多不同的选项..但无济于事。

Answer 1

我没有检查，但我认为问题出在这里：

editor.model.schema.register('my-widget', {
  inheritAllFrom: '$root',
  isLimit: true,
});

此架构规则表明 <my-widget> 将允许例如一个 <paragraph> 里面。但它没有说明 <my-widget> 可以在哪里使用。那是因为 $root 在任何其他元素中都不允许（因为它是根 :)）。

我认为以下应该可以正常工作：

editor.model.schema.register('my-widget', {
  inheritAllFrom: '$root',
  allowIn: '$root',
  isLimit: true,
});

或者，更通用的解决方案也应该有效：

editor.model.schema.register('my-widget', {
  inheritAllFrom: '$root',
  allowWhere: '$block',
  isLimit: true,
});

不过，编辑器应该不会无限循环崩溃，所以我报告了 https://github.com/ckeditor/ckeditor5-engine/issues/1441。

ckeditor5 - 自定义容器元素 - 粘贴时出现递归错误

ckeditor5 - custom container element - recursion error on paste