Как добавить HTML-контент в редактор CKEditor 5?

Как можно вставить HTML-код в редактор ckEditor во время выполнения (runtime) с использованием метода insertText?
  • 27 октября 2023 г. 18:58
Ответы на вопрос 3
Чтобы добавить HTML-контент в редактор CKEditor 5, вы можете использовать метод `insertHtml` вместо `insertText`. Вот пример кода:

```javascript
// Получить экземпляр редактора
const editor = document.querySelector('#editor');

// Вставить HTML-код
editor.editorInstance.model.change(writer => {
  const html = '<p>Ваш HTML-контент</p>';
  const insertionPosition = editor.editorInstance.model.document.selection.getFirstPosition();

  writer.insertHtml(html, insertionPosition);
});
```

Обратите внимание, что `#editor` - это селектор элемента, содержащего редактор CKEditor. Убедитесь, что замените его на соответствующий селектор в вашем коде.

Этот код вставит HTML-код в текущую позицию курсора в редакторе. Если вы хотите вставить HTML-код в определенное место в тексте, вам нужно будет указать соответствующую позицию `insertionPosition`.

Используя метод `insertHtml`, вам необходимо быть осторожными, поскольку он позволяет вставлять произвольный HTML-код, что может представлять угрозу безопасности. Убедитесь, что проверили и очистили HTML-код, прежде чем вставлять его в редактор.
npm install --save @ckeditor/ckeditor5-html-embedimport { HtmlEmbed } from '@ckeditor/ckeditor5-html-embed';

ClassicEditor
    .create( document.querySelector( '#editor' ), {
        plugins: [ HtmlEmbed ],
        toolbar: [ 'htmlEmbed' ],
    } )
    .then( /* ... */ )
    .catch( /* ... */ );
Установите пакет @ckeditor/ckeditor5-html-embed с помощью команды npm install --save @ckeditor/ckeditor5-html-embed. Далее, импортируйте компонент HtmlEmbed из модуля '@ckeditor/ckeditor5-html-embed'. Создайте экземпляр ClassicEditor, указав элемент, в котором будет встроен редактор, и настройте плагин HtmlEmbed и панель инструментов, включив их в настройки редактора. Ниже приведен пример внедрения HTML кода с использованием HtmlEmbed. Обработайте основные сценарии выполнения и возможные ошибки при создании редактора.
Похожие вопросы