Использование 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.

Скачать файл

ВНИМАНИЕ: Файлы из Базы знаний - это исходный код разработки. Это примеры решения задач, шаблоны, заготовки, "строительные материалы" для учетной системы. Файлы ориентированы на специалистов 1С, которые могут разобраться в коде и оптимизировать программу для запуска в базе данных. Гарантии работоспособности нет. Возврата нет. Технической поддержки нет.

Наименование По подписке [?] Купить один файл
HTML Редактор whizzywig в 1С 8.2 и 1С 8.3 платформе - компьютерный вариант
.epf 27,90Kb
8
8 Скачать (2 SM) Купить за 2 150 руб.
Использование HTML Редактора whizzywig в 1С 8.2 и 1С 8.3 платформах. Функционал дополнен мобильной платформой
.epf 54,53Kb
5
5 Скачать (2 SM) Купить за 2 150 руб.

Как уже было сказано в предыдущей публикации - Использование 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 Конфигурации 1cv8 Бесплатно (free)

Эта небольшая статья - некоторого рода шпаргалка по файловым потокам: как и зачем с ними работать, какие преимущества это дает.

23.06.2024    7513    bayselonarrend    20    

154

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

Пример использования «Сервисов интеграции» без подключения к Шине и без обменов.

13.03.2024    5968    dsdred    16    

80

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

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

24.01.2024    17807    YA_418728146    26    

71

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

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

06.10.2023    23786    SeiOkami    48    

135

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

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

28.08.2023    14779    YA_418728146    7    

166
Комментарии
Подписаться на ответы Инфостарт бот Сортировка: Древо развёрнутое
Свернуть все
1. sanner.smr 29.12.22 09:36 Сейчас в теме
Подскажите, как вытащить введённый пользователем отформатированный текст, в вашей реализации? Средствами 1С никак не получается.
2. user1206119 90 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;
}
Показать
3. dovolos 22 30.05.24 15:46 Сейчас в теме
Здравствуйте, ВернутьHTMLИзРедактора отрабатывает отлично, а как нам текст ХТМЛ, полученный из ВернутьHTMLИзРедактора, и сохраненный, предположим в текстовом поле неограниченной длины в следующий раз, при открытии скормить редактору? Чтобы не хранить в каждом значении текст редактора.
Изучил ваши публикации по этому вопросу, скачал эту и по NicEdit, но ответа на этот вопрос не нашел.
Так же вопрос, как "закэшить", чтобы каждый раз не получать данные макетов и двоичные данные редактора? Будет использоваться в документе, не хотелось бы каждый раз все это прогружать.
Надеюсь на вашу помощь, спасибо.
4. user1206119 90 30.05.24 18:20 Сейчас в теме
(3) А зачем вы храните в каждом значении текст редактора?
5. dovolos 22 30.05.24 19:01 Сейчас в теме
(4)не храню как раз и не хочу. Я разобрался, можно заменить исходный текст ПриСозданииНаСервере, и туда вполне можно вставить данные хтмл. Мне это поле вообще нужно, по большей части не для редактирования, а для того чтобы туда пользователи могли вставить форматированный текст с таблицами того же Ворда. В этот редактор странно вставляются таблицы, не все границы появляются, в NicEdit вставлялось четко, только там не нашел метода как получить свой текст.
И надо будет еще скрыть панель, она мне будет не нужна, слишком много места занимает.
Еще не понятно в плане безопасности, что может сделать библиотека, которая в двоичных данных хранится. Может ли она выполнить команду операционной системы к примеру? Я вот даже не знаю, есть ли механизмы защиты в движке вебовском 1с?
6. user1206119 90 30.05.24 21:46 Сейчас в теме
(5) В целом, если для чисто вставки, то можете взять другой редактор из другой публикации - там всё открыто, и его как раз за счет того, что там нет вообще картинки на меню - только текст, то его целиком можно хранить внутри события ПриСозданииНаСервере.
Что касается если без панели - тогда вот https://infostart.ru/1c/articles/1706955/ - там её просто закоментить и всё.
По поводу безопасности - в хром вообще ничего нельзя запустить - это фишка была у Internet Explorer. А с 1с 8.2.11 метод выполнить был отключен на WebКлиенте как класс - из-за этого кстати там пришлось в консоли костыли писать для вызова функций.
7. dovolos 22 03.06.24 10:55 Сейчас в теме
(6) с виду недурно, и для интеграции проще и вроде как безопаснее - нет непонятных бинарников. Единственное что пока не нравится, но это было и на whizzywig - правый клик перестает отрабатывать, вместо него открывается системное меню окна 1с. Нет ли способа обойти этот косяк?
Спасибо.
8. user1206119 90 03.06.24 18:40 Сейчас в теме
Вообще странно, видимо фича платформы - потому что тот редактор писался через iframe - т.е. он изолирован от 1с должен быть - плавающий frame. Может быть неверно интегрируете - там в коде уберите создание панели и всё (js имел ввиду, либо могу готовый js выложить для такого варианта)
9. dovolos 22 04.06.24 09:09 Сейчас в теме
(8)
Может быть неверно интегрируете

нет, это происходит в скачанных обработках, панели не убирал еще, это сеанс rdp - может связано с этим
Оставьте свое сообщение