Введение
Используя стандартный визуальный whizzywig HTML редактор, который можно интегрировать на JS, столкнулся с одной маленькой проблемой - слишком глючит HTML поле при работе с этим редактором на платформе 8.2. NicEdit - напротив, много требует за свой слишком маленький функционал (jquery для такого количества команд и интерфейса это излишество). Поэтому для своего helpdesk решил создать собственный html редактор, который был бы лишен слишком больших недостатков, характерных для своих предшественников.
Отличия от других редакторов - NicEdit и whizzywig
Разработка ведется на языке JS версии 1.2 - эта версия входит в состав Netscape Navigator 4.0 и в целом даже IE 4.01 16 bit. Используемые методы разработки также тестировались на последних версиях Webkit браузеров. Минимальные требования к браузеру:
- 1С хотя бы 8.0 и новее (тестировалось под 8.0.34.19, 8.2.12, 8.3.13, 8.3.14 (первая версия WebKit), 8.3.20).Возможно и поддержка 7.7. версии - тестировать html возможности не было.
- IE, начиная с 4.01 16 bit (должна поддерживаться русская локализация).
- Opera 9.x
- Safari 3.x
- Edge - все версии без исключения.
Во всех указанных браузерах есть поддержка desing mode.
Функционал:
- Поддержка вставки спецсимволов и математических символов.
- Поддержка тэгов вставки code.
- Базовая вставка таблиц (пока работа с колонками добавление и удаления не реализована).
- Стандартный базовый функционал
Пока проект находится на betta версии. Пока предварительный релиз можно скачать здесь бесплатно с github - Javascript editor simple.
Интеграция редактора (09.08.2022).
Требуются 2 вида форм:
- Обычные.
- Управляемые.
var iHTML="<'html><'head><'meta http-equiv=\"Content-Type\" content=\"text/html; charset=utf-8\"/><'/head><'body> test456<'/body><'/html>" -Содержимое макета ШаблонСтроки.
МакетTeст - взят с git-hub.
Для обычных форм код интеграции выглядит таким образом:
Процедура ПриОткрытии()
// Вставить содержимое обработчика.
//Тащим сам редактор (html содержимое файла редактора):
ДокументHTML=Обработки.РедакторHTML.ПолучитьМакет("МакетTeст").ПолучитьТекст();
//Заполняем содержимое Iframe:
Если ЗначениеЗаполнено(Объект.Ссылка) Тогда
//Шаблон строки замены:
СТР_ЗАМЕНА=Обработки.РедакторHTML.ПолучитьМакет("ШаблонСтроки").ПолучитьТекст();
//Содержимое HTML документа из базы:
СтрокаHTML=РаботаСФайламиСервер.ПолучитьТекстИЗаполнитьВложения(Объект.Ссылка,ЭтаФорма.СписокКартинок,ЭтаФорма.СписокКартинокВБазе);
//Осуществляем сборку редактора:
СтрокаHTML=СтрЗаменить(СтрокаHTML,Символы.ПС,"");
СтрокаHTML=СтрЗаменить(СтрокаHTML,Символы.ВК,"");
СтрокаHTML=СтрЗаменить(СтрокаHTML,"""","\""");
СтрокаHTML=СтрЗаменить(СтрокаHTML,"'","\'");
СтрокаHTML=СтрЗаменить(СтрокаHTML,"<","<'");
СтрокаHTML="var iHTML ="" "+СтрокаHTML+"""";
ДокументHTML=СтрЗаменить(ДокументHTML,СТР_ЗАМЕНА,СтрокаHTML);
КонецЕсли;
//Устанавливаем итоговый текст поля HTML документа:
ЭлементыФормы.ДокументHTML.УстановитьТекст(ДокументHTML);
КонецПроцедуры
Процедура ПередЗаписью(Отказ)
// Вставить содержимое обработчика.
ДокументПервогоБраузера = ЭлементыФормы.ДокументHTML.Документ;
ОкноПервогоБраузера = ДокументПервогоБраузера.parentWindow; // IE
Если ОкноПервогоБраузера = Неопределено Тогда
ОкноПервогоБраузера = ДокументПервогоБраузера.defaultView; // Прочие браузеры
КонецЕсли;
//Save To textarea:
ОкноПервогоБраузера.VisibleHTML();
//Return HTML code from textarea:
Объект.ОписаниеHTML=ЭлементыФормы.ДокументHTML.document.forms["HTML_CODE"].codetext1.value;
//Hide html code on redaktor:
ОкноПервогоБраузера.VisibleHTML();
КонецПроцедуры
Для Управляемых форм код будет почти таким же:
&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
//Вставить содержимое обработчика
//Тащим редактор
ЭтаФорма.ДокументHTML=Обработки.РедакторHTML.ПолучитьМакет("МакетTeст").ПолучитьТекст();
//Если у нас уже есть данные - тогда собираем из них итоговый документ:
Если ЗначениеЗаполнено(Объект.Ссылка) Тогда
СТР_ЗАМЕНА=Обработки.РедакторHTML.ПолучитьМакет("ШаблонСтроки").ПолучитьТекст();
//Получаем HTML строку из базы:
СтрокаHTML=РаботаСФайламиСервер.ПолучитьТекстИЗаполнитьВложения(Объект.Ссылка,ЭтаФорма.СписокКартинок,ЭтаФорма.СписокКартинокВБазе);
//Собираем редактор:
СтрокаHTML=СтрЗаменить(СтрокаHTML,Символы.ПС,"");
СтрокаHTML=СтрЗаменить(СтрокаHTML,Символы.ВК,"");
СтрокаHTML=СтрЗаменить(СтрокаHTML,"""","\""");
СтрокаHTML=СтрЗаменить(СтрокаHTML,"'","\'");
СтрокаHTML=СтрЗаменить(СтрокаHTML,"<","<'");
СтрокаHTML="var iHTML ="" "+СтрокаHTML+"""";
//Итоговая сборка:
ЭтаФорма.ДокументHTML=СтрЗаменить(ЭтаФорма.ДокументHTML,СТР_ЗАМЕНА,СтрокаHTML);
КонецЕсли;
КонецПроцедуры
&НаКлиенте
Процедура ПередЗаписью(Отказ, ПараметрыЗаписи)
//Вставить содержимое обработчика
//Получаем доступ к скриптам:
ДокументПервогоБраузера = Элементы.ДокументHTML.Документ;
ОкноПервогоБраузера = ДокументПервогоБраузера.parentWindow; // IE
Если ОкноПервогоБраузера = Неопределено Тогда
ОкноПервогоБраузера = ДокументПервогоБраузера.defaultView; // Прочие браузеры
КонецЕсли;
//Вытаскиваем код из редактора для сохранения базы:
//Save To textarea:
ОкноПервогоБраузера.VisibleHTML();
//Return HTML code from textarea:
Объект.ОписаниеHTML=Элементы.ДокументHTML.document.forms["HTML_CODE"].codetext1.value;
ОкноПервогоБраузера.VisibleHTML();
КонецПроцедуры
Предупреждение: редактор пока в режиме бетта версии, поэтому возможны глюки. Также обратите внимание, что каждый браузер имеет свой способ выполнения комманд.
