代码之家 › 专栏 › 技术社区 › AlanObject

CKeditor 5向图像添加标题

ckeditor5 ckeditor

0

AlanObject · 技术社区 · 6 年前

我可以创建一个包含图像元素的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 });
  }

已发出事件的接收器可以插入此内容,并正确显示。有趣的是,用户界面为用户提供了添加标题的选项。

如何添加标题作家上面的回调?(对象) 这个图像 可选包含可用于为用户设置的文本。)

更重要的是,定义哪些属性可用于哪些元素类型以及元素的行为方式的文档在哪里?我只知道 SRC 来自示例的属性。

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

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

1 回复 | 直到 6 年前

1

oleq 6 年前

图像标题是“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属性。

目前尚无此类文件。要了解更多有关模型的信息,最简单的方法是浏览 *editing.js 档案 feature.