CKEditor 5向图像添加标题

CKEditor 5向图像添加标题,ckeditor,ckeditor5,Ckeditor,Ckeditor5,我可以很容易地创建一个DocumentFragment,其中包含图像元素,如下所示: clickPasteImage(editorComponent: CKEditorComponent) { const editor = editorComponent.editorInstance; const docFragment = editor.model.change(writer => { const fragment = writer.createDocum

我可以很容易地创建一个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回调添加标题?(对象此.image中可选包含可用于为用户设置的文本。)

更重要的是,定义哪些属性可用于哪些元素类型以及元素的行为方式的文档在哪里?我仅从一个示例中了解了有关src属性的新信息

为了增加理解,createElement('image')调用在什么时候变形为以下HTML

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

....
图像标题是“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() );
});
执行它,它将向编辑器添加一个带有标题的图像

更重要的是,定义哪些属性可用于哪些元素类型以及元素的行为方式的文档在哪里?我仅从一个示例中了解src属性

目前还没有这样的文档。了解该模型更多信息的最简单方法是浏览