Визуальный редактор текстового интерфейса JavaScript TUI HTML Editor

На днях решил использовать любимый мой редактор whizzywig - как легкая и быстрая альтернатива имеющимся решениям, и его переносимость на разных версиях 1С. 

Однако, оказалось на версии платформы 8.3.24 на работе оказался баг в базе, и редактор не смог запуститься в стандартном режиме (какого черта это случилось, я не знаю). 

По итогу мной было принято решение о создание нового HTML редактора, который бы можно было использовать с сжатой командной панелью. JavascriptSimpleEditor для этого подходил - но командная панель у него сделана не компактно. 

По итогу переработки последнего и с учетом добавления команд получился более компактный и функциональный редактор HTML. 

Интерфейс его выглядит на 1С 8.2.9 таким образом: 

Для обычных форм тест выполнялся на 1С 8.0: 

Для 8.3 тест на платформе 8.3.20 (каркасная конфигурация 1С для подготовки к специалисту): 

Системные требования к браузерам:

1. 1С хотя бы 8.0 и новее (тестировалось под 8.0.34.19, 8.2.12, 8.3.13, 8.3.14 (первая версия WebKit), 8.3.20).Возможно и поддержка 7.7. версии - тестировать html возможности не было. 
2. IE, начиная с 4.01 16 bit (должна поддерживаться русская локализация). 
3. Opera 9.x 
4. Safari  1.3 - минимальная версия с design mode. Рекомендуемая стабильная версия 3.0, для использования редактора на более старых версиях нужно добавлять пробел иначе браузер ошибочно начинает выделять страницу целиком. 
5. Edge - все версии без исключения.
6. Chrome - любая версия. 
7. Mozilla - 0.9 и новее. Netscape 7.1 тоже самое.

В указанных браузерах есть режим design mode. Это условие является обязательным. Для браузера Konqueror требуется версия на движке webkit или blink.

Скриншот для 1С 8.5.1 сделать не удалось (не под рукой).

Интеграция редактора (09.08.2022). 

Требуются 2 вида форм: 

1. Обычные.
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();
	
КонецПроцедуры   

Предупреждение: обратите внимание, что каждый браузер имеет свой способ выполнения комманд. 

Тестирование на браузерах:

IE 8.0 Windows XP:

Supermium 132: 

Netscape 7.1: