Визуальный HTML-редактор CKEditor в управляемых формах 1С
- by baklan
Заказчик попросил добавить возможность создавать и редактировать описание номенклатуры с форматирование HTML, и последующей передачи сформированного кода на сайт.
Здесь опишу только первый этап — создание управляемой формы с возможностью создавать и редактировать описания.
Сами описания на разных языках у нас хранятся в регистре сведений, поэтому работать мы будем с формой записи регистра сведений. Итак создаем в форме реквизит HTML_editor с типом Строка. Помещаем его на форму в виде HTML-документа

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
HTML_editor = "<!DOCTYPE html>
|<html>
| <head>
| <meta charset='utf-8'>
| <title>CKEditor</title>
| <script src='https://cdn.ckeditor.com/4.17.1/standard/ckeditor.js'></script>
| </head>
| <body>
| <textarea name='editor1'></textarea>
| <script>
| CKEDITOR.replace( 'editor1' );
| </script>
| </body>
|</html>";
КонецПроцедуры
В процедуре ПриСозданииНаСервере заполняем HTML_editor простейшим HTML-кодом, взятым с сайта CKEditor .
Теперь добавим вспомогательную функцию, объединяющую разные типы клиентов. Функция найдена на просторах… на авторство не претендуем
&НаКлиенте
Функция ПолучитьHTML_View()
Перем HTML_View;
HTML_View = неопределено;
Если Элементы.HTML_editor.Документ.parentWindow=Неопределено Тогда
HTML_View = Элементы.HTML_editor.Документ.defaultView;
Иначе
HTML_View = Элементы.HTML_editor.Документ.parentWindow;
КонецЕсли;
Возврат HTML_View;
КонецФункции
Далее нужно создать процедуру чтения текущих данных из регистра и вставки их в поле редактирования CKEditor. Нужно использовать событие поля HTML-документа ДокументСформирован. Здесь «Запись.Описание» — строка-ресурс регистра, который и является целью редактирования.
&НаКлиенте
Процедура HTML_editorДокументСформирован(Элемент)
HTML_View = ПолучитьHTML_View();
HTML_View.CKEDITOR.instances["editor1"].setData(Запись.Описание);
КонецПроцедуры
Осталось отредактировать и записать данные в регистр. Создадим процедуру ПередЗаписью
&НаКлиенте
Процедура ПередЗаписью(Отказ, ПараметрыЗаписи)
HTML_View = ПолучитьHTML_View();
Запись.Описание = HTML_View.CKEDITOR.instances["editor1"].getData();
КонецПроцедуры
Проверяем:


Заказчик попросил добавить возможность создавать и редактировать описание номенклатуры с форматирование HTML, и последующей передачи сформированного кода на сайт. Здесь опишу только первый этап — создание управляемой формы с возможностью создавать и редактировать описания. Сами описания на разных языках у нас хранятся в регистре сведений, поэтому работать мы будем с формой записи регистра сведений. Итак…