Question

我可以很容易地创建一个包含图像元素的DocumentFragment：

  clickPasteImage(editorComponent: CKEditorComponent) {
    const editor = editorComponent.editorInstance;
    const docFragment = editor.model.change(writer => {
      const fragment = writer.createDocumentFragment();
      const e1 = writer.createElement('image', { src: TboxService.imageURL(this.image.id) });
      writer.append(e1, fragment);
      return fragment;
    });
    this.paste.emit({ content: docFragment, quote: false, obj: this.image });
  }

发出的事件的接收者可以插入此内容，并且可以正确显示。有趣的是，UI使用户可以选择添加字幕。

如何从上面的 writer 回调中添加该标题？（对象 this.image 可以选择在其中包含可用于为用户设置的文本。）

更重要的是，定义哪些属性可用于哪些元素类型以及元素如何行为的文档在哪里？我只是从示例中了解 src 属性。

为了加深理解， createElement（'image'”调用在什么时候变成了以下HTML？

<figure>
  <img src="....">
  <figcaption>....</figcaption>
</figure>

Answer 1

图像标题是“图像”元素内的“标题”元素。查看此代码段。

editor.model.change(writer => {      
    const image = writer.createElement( 'image', { src: 'https://ckeditor5.github.io/docs/nightly/ckeditor5/latest/assets/img/umbrellas.jpg' } );
    writer.appendElement( 'caption', image );
    writer.appendText( 'Caption text', image.getChild( 0 ) );
    writer.append(image, editor.model.document.getRoot() );
});

执行它，它将在编辑器中添加带有标题的图像。

更重要的是，定义哪些属性可用于哪些元素类型以及元素如何行为的文档在哪里？我只是从示例中了解src属性。

目前没有此类文档。了解更多有关模型的最简单方法是浏览feature.的*editing.js文件

CKEditor 5为图像添加字幕

1 个答案: