CKEditor 5 向图像添加标题

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 回调中添加标题？（object this.image 中可选择包含可用于为用户设置的文本。）

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

为了加深理解，createElement('image' 调用在什么时候变形为以下 HTML?

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

Answer 1

图像标题是 "image" 元素内的 "caption" 元素。看看这个片段。:

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() );
});

执行它，它会向编辑器附加添加带有标题的图像。

More importantly, where is the documentation that defines what attributes are available for which element types and how the elements behave? I only new about the src attribute from an example.

目前没有此类文档。了解有关该模型的更多信息的最简单方法是浏览 feature.

的 *editing.js 文件

CKEditor 5 向图像添加标题

CKEditor 5 adding caption to image

ckeditor

ckeditor5