Двое из лар1Са

BackLine

1С:Предприятие

Визуальный HTML-редактор CKEditor в управляемых формах 1С

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

Добавить комментарий