Как получить данные из CKEditor в поле HTML-документа 1С и очистить его содержимое

Введение

При разработке управляемых форм в 1С часто возникает задача интеграции продвинутых текстовых редакторов, таких как CKEditor, в стандартный элемент ПолеHTMLДокумента. Это позволяет пользователям работать с форматированным текстом (HTML) прямо внутри интерфейса системы. В данном руководстве мы разберем, как получить доступ к содержимому редактора и как корректно очистить поле после выполнения операций.

Получение данных из поля HTML-документа

Для взаимодействия с элементами, отображаемыми в ПолеHTMLДокумента, мы используем объект Документ. Важно понимать, что обращение к элементам страницы возможно только после того, как документ полностью загружен. Для простых элементов страницы можно использовать стандартный метод getElementById.

Рассмотрим пример получения текстового значения из элемента по его идентификатору:


// Получаем объект документа из элемента формы
ДокументHTML = Элементы.ПолеHTML.Документ;

// Находим элемент по его ID и получаем его текст
Элемент = ДокументHTML.getElementById("ИдЭлемента");
Если Элемент <> Неопределено Тогда
    Сообщить(Элемент.innerText);
КонецЕсли;

Интеграция с CKEditor

Когда речь заходит об использовании CKEditor, обычный innerText может не вернуть нужный HTML-контент, так как сам редактор является сложным JavaScript-объектом. Чтобы извлечь данные, нам нужно обратиться к глобальному объекту CKEDITOR, который инициализируется внутри window (или defaultView) нашего HTML-документа.

Разберем по шагам, как правильно извлечь данные:

Получаем доступ к экземпляру редактора через defaultView.
Проверяем режим работы редактора (рекомендуется убедиться, что он находится в режиме wysiwyg).
Используем метод getData() для получения HTML-разметки.


// Доступ к экземпляру редактора
CkEditor = Элементы.ПолеHTML.Документ.defaultView.CKEDITOR.instances.editor1;

// Проверяем, инициализирован ли редактор и находимся ли в режиме визуального редактирования
Если CkEditor <> Неопределено И CkEditor.mode = "wysiwyg" Тогда
    // Получаем HTML-код
    ТекстHTML = CkEditor.getData();
    Сообщить(ТекстHTML);
КонецЕсли;

Как правильно очистить содержимое

Очистка поля — не менее важная задача. В зависимости от архитектуры вашей формы, можно выбрать один из трех подходов.

Способ 1: Очистка через метод редактора (рекомендуемый)

Если CKEditor уже активен, не стоит перезагружать всю страницу. Лучше использовать встроенный метод setData, который эффективно сбрасывает состояние редактора.


// Очистка содержимого конкретного редактора
CkEditor.setData("");

Способ 2: Полная перерисовка документа

Если требуется полностью «обнулить» состояние элемента ПолеHTMLДокумента, можно записать в него пустой HTML-шаблон.

Элементы.ПолеHTML.Документ.write("<html><body></body></html>");

Способ 3: Использование метода платформы

Для стандартных полей HTML, если не используется сложная инициализация JS-библиотек, можно попробовать метод объекта формы:

Элементы.ПолеHTML.УстановитьТекст("");

Важные рекомендации при разработке

Чтобы избежать ошибок при работе с HTML-полем, учитывайте следующие нюансы:

Событие загрузки: Всегда выполняйте код взаимодействия с JS-объектами только после наступления события ДокументСформирован. Попытка обращения к CKEDITOR.instances до завершения загрузки страницы приведет к ошибке доступа к неопределенному объекту.
Безопасность и движки: Помните, что поведение ПолеHTMLДокумента сильно зависит от системного браузера (Internet Explorer, Edge или Chromium). При переходе на современные версии платформы с использованием движка WebView2 (Chromium) взаимодействие может потребовать дополнительных настроек безопасности.
Отладка: Если вы не уверены, существует ли объект в DOM-дереве, используйте отладчик 1С. Остановитесь в режиме отладки и через «Табло» или «Вычислить выражение» просмотрите структуру Элементы.ПолеHTML.Документ — это поможет увидеть иерархию элементов и доступные свойства JS-объектов.

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

← На главную