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

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

0 голосов
/ 03 февраля 2019

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

1 Ответ

0 голосов
/ 04 февраля 2019

Заголовок изображения является элементом «заголовка» внутри элемента «изображения».Ознакомьтесь с этим фрагментом .:

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 функции .

...