Использование HTML Редактора whizzywig в 1С 8.2 и 1С 8.3 платформах

12.04.22

Разработка - Механизмы платформы 1С

В статье будут разобраны способы использования визуального HTML Редактора whizzywig в 1С 8.2 и 1С 8.3, который существенно меньше по размерам, чем TinyMCE, но при этом обладает большими возможностями. Показано достоинство этого редактора. Приведены обработки, которые работают как на компьютерной платформе, так и пример реализации обработки, которая предназначена для мобильной платформы. Решение испытывалось на платформах 1С 8.2.12 и 8.3.20, и мобильном клиенте 8.3.19.59.

Скачать файлы

Наименование Файл Версия Размер
HTML Редактор whizzywig в 1С 8.2 и 1С 8.3 платформе - компьютерный вариант
.epf 27,90Kb
5
.epf 27,90Kb 5 Скачать
Использование HTML Редактора whizzywig в 1С 8.2 и 1С 8.3 платформах. Функционал дополнен мобильной платформой
.epf 54,53Kb
3
.epf 54,53Kb 3 Скачать

Как уже было сказано в предыдущей публикации - Использование HTML Редактора NicEdit в 1С 8.2 и 1С 8.3 платформах можно интегрировать в обработку весьма компактный редактор, который будет обладать основным функционалом, и для которого нет необходимости хранить отдельную папку в каталоге сервера - необходимые файлы лежат во временном хранилище, и чистятся самой 1С. Редактор NicEditor хоть и хороший, но у него немного функционала (похож на функционал обычного , и к тому же нет русского языка. Этой статьёй я хотел бы уже показать пример интеграции уже более сложного редактора, но при этом довольно мощного по функционалу. 

По системным требованиям: 

 

 

На IE 5.5 поддерживаются все функции редактора. Но и на современном Chrome работает прекрасно, хотя функционал по Flash Player (просмотр изображений на старых системах) не является уже актуальным. Также есть часть кода для загрузки картинок на php. Модуль орфографии тоже работать не будет, так как старый. Но, все остальное работает более чем на ура. 

Если очень кратко, то основные возможности: 

  1. Мультиязычность. Локализация на Русском, Немецком, Французском языках и др.
  2. Работа с таблицами. Поддерживается визуальное редактирование таблиц. 
  3. Легко работает с текстом. Можно менять шрифты, цвета и так далее. 
  4. Возможность отмены и повтора введенного текста!. В этом редакторе с точки зрения текста можно отменять и вводить текст через кнопки. 
  5. Его компактный размер и сравнительная легкость интеграции.

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

Структура минимального каталога для редактора: 

 

 

Однако, если его загрузить - то сам каталог будет по-больше, но для 1С не актуальна часть функционала (у нас всё-таки не полноценный браузер, а его подобие).

Структура интеграции по макетам: 

  1. Макет на картинку. 
  2. Макет на языковой пакет. Их может быть как один, так и несколько - на вкус и цвет. 
  3. Макет на редактор. 
  4. Макет на HTML документ. 

Как видно из списка макетов, всё будет похоже на NicEditor, с некоторыми оговоркам. Начнем с Обычного интерфейса - там отличий не будет, поэтому он проще. 

 

Интеграция в Обычные Формы.

Механика похожа на TinyMCE и NicEditor. Поэтому подробно останавливаться не буду. Приведу пример кода: 

Процедура ПриОткрытии()
	// Вставить содержимое обработчика.
		
	Макет=ЭтотОбъект.ПолучитьМакет("Макет");  //Картинка.
	ТекстРедактора=ЭтотОбъект.ПолучитьМакет("Редактор").ПолучитьТекст();
	//Начинаем компоновать пути к скриптам:
	ТекстHTML=ЭтотОбъект.ПолучитьМакет("СодержимоеHTML").ПолучитьТекст();
	Руссификатор=ЭтотОбъект.ПолучитьМакет("Руссификатор").ПолучитьТекст();
	ВременныйФайл=ПолучитьИмяВременногоФайла("png");	
	Макет.Записать(ВременныйФайл);
	
     ПутьПравильногоВременногоФайла=СтрЗаменить(ВременныйФайл,"\","/");
	ТекстРедактора=	СтрЗаменить(ТекстРедактора,
	"icons.png",""+ПутьПравильногоВременногоФайла + "");
	
	ТекстHTML=СтрЗаменить(ТекстHTML,"scripttext",ТекстРедактора);	
	Файл=ПолучитьИмяВременногоФайла("html");
	Текст=новый ЗаписьТекста;
	Текст.Открыть(Файл);
	Текст.Записать(ТекстHTML);
	Текст.Закрыть();
	
	
	
	ЭлементыФормы.ПолеHTMLДокумента1.Перейти(Файл);

	
КонецПроцедуры

Таким образом, ничем не отличается принципиальным от редактора NicEdit. Однако, с Управляемыми Формами немного придется повозиться. 

 

Интеграция в Управляемое Приложение.

Здесь важно отметить следующее: 

  1. Поскольку редактор существенно сложнее - чего только наличие мультизаячности добавляет, то 1С, в частности 8.2 на Тонком Клиенте задваивает сам редактор. Обход буду показывать ниже. 
  2. На Веб Клиенте Редактор интегрируется аналогично NicEdit. 

Поэтому краткий алгоритм: 

  1. Инициализировать как описал для NicEdit редактор на сервере. 
  2. На Тонком, Толстом и на всякий случай на Мобильном приложении - записать во временный файл html. И затем подменить содержимое документа на ссылку на этот временный файл. 

За подробными комментариями что, где, зачем, и почему - смотрите в публикации Использование HTML Редактора NicEdit в 1С 8.2 и 1С 8.3 платформах. А теперь перейдем к делу. Код для интеграции редактора в Управляемые формы, работающий на Тонком, Толстом, ВебКлиенте будет следующий: 

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	//Вставить содержимое обработчика
	ОбъектО=РеквизитФормыВЗначение("Объект");
	Макет=ОбъектО.ПолучитьМакет("Макет");
	ТекстРедактора=ОбъектО.ПолучитьМакет("Редактор").ПолучитьТекст();
	//Начинаем компоновать пути к скриптам:
	ТекстHTML=ОбъектО.ПолучитьМакет("СодержимоеHTML").ПолучитьТекст();
	Руссификатор=ОбъектО.ПолучитьМакет("Руссификатор").ПолучитьТекст();
	
	
	
	ЭтаФорма.Реквизит1=ПолучитьНавигационнуюСсылкуИнформационнойБазы()+"/"+ПоместитьВоВременноеХранилище(Макет);
	ТекстРедактора=	СтрЗаменить(ТекстРедактора,
	"icons.png",ЭтаФорма.Реквизит1);
	
	ТекстРедактора=	СтрЗаменить(ТекстРедактора,
	"whizzywig = {",""+Символы.ПС+Руссификатор+Символы.ПС+"whizzywig = {");
	
	
	
	ТекстHTML=СтрЗаменить(ТекстHTML,"scripttext",ТекстРедактора);	
	
	
	HTML =ТекстHTML;
	
КонецПроцедуры

&НаКлиенте
Процедура ПриОткрытии(Отказ)
	
	//Для ВебКлиента ничего делать не надо - инициализирован на Сервере.
	#Если не ВебКлиент Тогда
		
		
		Файл=ПолучитьИмяВременногоФайла("html");
		Текст=новый ЗаписьТекста;
		Текст.Открыть(Файл);
		Текст.Записать(HTML);
		Текст.Закрыть();
		
		HTML = ПолучитьНавигационнуюСсылкуИнформационнойБазы()+"/"+ПоместитьВоВременноеХранилище(HTML);
		
	#КонецЕсли
	
КонецПроцедуры

Для мобильного приложения необходимо доработать немного код, аналогично редактору NicEdit. Если все сделано правильно, то вот результаты: 

Обычные Формы Толстый Клиент (слева 8.2.12  и 8.3.20 - справа):

 

 

 

Тонкий Клиент (слева 8.2.12  и 8.3.20 - справа):

 

 

Веб-Клиент :

1С 8.2.12 - использовался IE 11 (последний доступный браузер для данного клиента):

 

 

1С 8.3.20  - использовался Яндекс Браузер - Движок Cromium:

 

 

Ну и на последок - мобильный клиент 8.3.19.59 (условия аналогичны тесту NicEditor).

 

 

 

Заключение: 

Таким образом, данный редактор является на взгляд автора лучше TinyMCE, так как обладает следующими критериями: 

  1. Существенно меньший размер дистрибутива позволяет собрать редактор во временном хранилище. 
  2. Обладает существенным функционалом. У редактора присутствует даже собственный просмотрщик и менеджер загрузки на PHP И Flash Player, и даже проверка синтаксиса. Хотя с точки зрения 1С не так актуально, но список внушительный. 
  3. Крайне не требовательный к ресурсам. Редактор прекрасно себя чувствует в самых современных браузерах, а также в очень и очень старых - IE 5.5. 
  4. Имеется несколько языковых локализаций. Можно даже настроить на языковой режим конфигурацию (если идет разговор о поддержке мультиязычного интерфейса).

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

Использование HTML редактора в Поле документа 1C WYSIWYG.

См. также

Как готовить и есть массивы

Механизмы платформы 1С Платформа 1С v8.3 Бесплатно (free)

Все мы используем массивы в своем коде. Это один из первых объектов, который дают ученикам при прохождении обучения программированию. Но умеем ли мы ими пользоваться? В этой статье я хочу показать все методы массива, а также некоторые фишки в работе с массивами.

24.01.2024    4533    YA_418728146    25    

60

Планы обмена VS История данных

Обмен между базами 1C Механизмы платформы 1С Платформа 1С v8.3 Бесплатно (free)

Вы все еще регистрируете изменения только на Планах обмена и Регистрах сведений?

11.12.2023    5601    dsdred    32    

104

1С-ная магия

Механизмы платформы 1С Бесплатно (free)

Язык программирования 1С содержит много нюансов и особенностей, которые могут приводить к неожиданным для разработчика результатам. Сталкиваясь с ними, программист начинает лучше понимать логику платформы, а значит, быстрее выявлять ошибки и видеть потенциальные узкие места своего кода там, где позже можно было бы ещё долго медитировать с отладчиком в поисках источника проблемы. Мы рассмотрим разные примеры поведения кода 1С. Разберём результаты выполнения и ответим на вопросы «Почему?», «Как же так?» и «Зачем нам это знать?». 

06.10.2023    17675    SeiOkami    46    

116

Дефрагментация и реиндексация после перехода на платформу 8.3.22

Механизмы платформы 1С Платформа 1С v8.3 Бесплатно (free)

Начиная с версии платформы 8.3.22 1С снимает стандартные блокировки БД на уровне страниц. Делаем рабочий скрипт, как раньше.

14.09.2023    11166    human_new    27    

72

Валидация JSON через XDTO (включая массивы)

WEB-интеграция Универсальные функции Механизмы платформы 1С Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

При работе с интеграциями рано или поздно придется столкнуться с получением JSON файлов. И, конечно же, жизнь заставит проверять файлы перед тем, как записывать данные в БД.

28.08.2023    8044    YA_418728146    6    

134

Внешние компоненты Native API на языке Rust - Просто!

Механизмы платформы 1С Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

Внешние компоненты для 1С можно разработывать очень просто, пользуясь всеми преимуществами языка Rust - от безопасности и кроссплатформенности до удобного менеджера библиотек.

20.08.2023    6000    sebekerga    54    

92

Все скопируем и вставим! (Буфер обмена в 1С 8.3.24)

Механизмы платформы 1С Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

Рассмотрим новую возможность 8.3.24 и как её можно эффективно использовать

27.06.2023    14737    SeiOkami    31    

100

Методы работы с универсальным отчетом в подсистеме "Варианты отчетов" на БСП

Механизмы платформы 1С Платформа 1С v8.3 Конфигурации 1cv8 Бесплатно (free)

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

30.05.2023    4839    quazare    4    

86
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. sanner.smr 29.12.22 09:36 Сейчас в теме
Подскажите, как вытащить введённый пользователем отформатированный текст, в вашей реализации? Средствами 1С никак не получается.
2. user1206119 76 29.12.22 10:19 Сейчас в теме
(1) Для возврата можно использовать код (Обычные и Управляемые)
&НаКлиенте
Функция ВернутьHTMLИзРедактора(ОписаниеЗадачиHTML) экспорт
	
	ДокументПервогоБраузера = ОписаниеЗадачиHTML.Документ;
	ОкноПервогоБраузера     = ДокументПервогоБраузера.parentWindow; // IE
	Если ОкноПервогоБраузера = Неопределено Тогда
		ОкноПервогоБраузера = ДокументПервогоБраузера.defaultView; // Прочие браузеры
	КонецЕсли;
    ОкноПервогоБраузера.EditorIdShowHTML();
    Текст=СокрЛП(ОписаниеЗадачиHTML.Документ.getElementById("sixth").value);
    ОкноПервогоБраузера.EditorIdShowDesign();

    возврат Текст;	
	
КонецФункции 
Показать

Вызов осуществлять перед записью на клиенте.
Функции js по возврату текста, которые вызываются в 1С необходимо прописать в макете HTML. Исходный код их выглядит таким образом:
	function EditorIdShowHTML() { 
	 whizzywig.makeSo("html");
	 return document.getElementById("sixth").value; 
	}
	
	function EditorIdShowDesign() { 
	 whizzywig.showDesign();
	 return document.getElementById("sixth").value;
}
Показать
Оставьте свое сообщение