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

Получатель отправленного события может вставить этот контент, и он отображается правильно. Что интересно, пользовательский интерфейс дает пользователю возможность добавить подпись.

Как добавить этот заголовок из обратного вызова писателя выше? (Объект 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 из примера.

На данный момент такой документации нет. Самый простой способ узнать больше о модели - это просмотреть *editing.js файлы функции.