CKEditor 5 - это мощный текстовый редактор, который обеспечивает богатый функционал для создания и редактирования текстового контента в веб-приложениях. Он имеет встроенные функции форматирования текста, создания таблиц, вставки изображений и видео, а также многое другое. Чтобы добавить HTML контент в CKEditor 5, вам потребуется использовать его API.
Во-первых, убедитесь, что вы установили и подключили CKEditor 5 к вашему проекту. Подробная документация о том, как это сделать, доступна на официальном сайте CKEditor.
Когда CKEditor 5 готов к использованию, вы можете добавить HTML контент, используя метод setData его API. Этот метод позволяет установить содержимое редактора в виде HTML-строки.
const editor = ClassicEditor
.create( document.querySelector( '#editor' ) )
.then( editor => {
// Устанавливаем HTML контент
editor.setData( '<p>Пример HTML-контента</p>' );
} )
.catch( error => {
console.error( error );
} );
В этом примере мы создаем экземпляр редактора CKEditor 5, выбираем элемент с идентификатором 'editor' и используем метод setData, чтобы установить HTML-контент, в данном случае <p>Пример HTML-контента</p>.
Кроме того, вы можете добавить HTML контент с помощью кнопки или любого другого события. Для этого вам потребуется обработать это событие и вызвать метод setData с соответствующим контентом.
// Кнопка для добавления HTML контента
const addButton = document.querySelector( '#add-button' );
addButton.addEventListener( 'click', () => {
editor.setData( '<p>Дополнительный HTML контент</p>' );
} );
В этом примере мы добавляем слушатель события 'click' к кнопке с идентификатором 'add-button'. При клике на кнопку, метод setData вызывается с новым HTML контентом <p>Дополнительный HTML контент</p>. Обратите внимание, что мы используем тот же экземпляр редактора editor, который мы создали ранее.
В заключение, добавление HTML контента в CKEditor 5 можно реализовать, используя метод setData его API. Это позволяет установить HTML-строку в качестве контента редактора. Вы можете вызвать этот метод при инициализации редактора или в ответ на события вашего приложения.