CKEditor 5 добавляет подпись к изображению

Я могу довольно легко создать 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 });
  }

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

Как добавить эту подпись из обратного вызова writer выше? (Объект this.image может содержать текст, который можно использовать для установки его для пользователя.)

Что еще более важно, где документация, определяющая, какие атрибуты доступны для тех или иных типов элементов и как эти элементы ведут себя? Я только что узнал об атрибуте src из примера.

Чтобы было понятнее, в какой момент вызов createElement('image' преобразуется в следующий HTML-код?

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

ckeditor ckeditor5
person AlanObject    schedule 03.02.2019    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Подпись к изображению — это элемент «заголовок» внутри элемента «изображение». Посмотрите этот фрагмент.:

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 файлов функции .

person oleq    schedule 04.02.2019