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

11.04.22

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

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

Скачать исходный код

Наименование Файл Версия Размер
Подключенный Nicedit в обработке для компьютерной платформы.
.epf 23,36Kb
2
.epf 23,36Kb 2 Скачать
Подключенный Nicedit в обработке для мобильной и компьютерной платформы.
.epf 31,05Kb
2
.epf 31,05Kb 2 Скачать

Краткий обзор предистории

Не так давно решил написать собственную конфигурацию для автоматизации Help-Desk. Более того, эту систему захотелось сделать универсальной. Встал вопрос - а как-же обеспечить удобный ввод для заявок пользователей? Для этого используется HTML документ. 1С предлагает несколько объектов: 

  1. Форматированный документ. Сравнительно новый объект, имеющий много недостатков. Более того, этот объект нельзя полноценно использовать в обычных формах.
  2. Поле HTML документа. Это решение было ещё в 1С 8.1. Основным достоинством является то, что работа с этим объектом такая же как с текстом, и не портится форматирование документа - есть возможность редактировать. 

Поэтому был выбран вариант Поле HTML документа. Но тут ждал "сюрприз": У Поле HTML документа нет встроенной в 1С командной панели в режиме управляемого приложения. Собственного говоря, про один из способов решения данной проблемы и будет эта статья.

 

Способы доработки HTML документа в управляемом и обычном приложении

Если их сократить, то получится 3 варианта: 

  1. Написать собственный редактор HTML документа из 1С. 
  2. Использовать компактный готовый визуальный редактор, написанный на javascript.
  3. Использовать полноценный HTML визуальный редактор на Javascript. 

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

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

Второй подход является хорошим, однако надо понимать 2 ограничения: 

  1. Его функционал будет меньше, чем у полновесного редактора. При этом имеется в виду то, что сам редактор хоть и будет функциональным, но его функционал будет менее обширным чем TinyMCE. 
  2. Методика интеграции микроредакторов для различных типов приложений и клиентов, если применяется способ хранения текстов внутри макетов (их будет как правило несколько), может существенно отличаться. 

 

Микроредактор NicEdit 

Их визуальных html редакторов автору статьи приглянулись несколько визуальных редакторов. Один из них - это  NicEditor. Простой визуальный html редактор. Официальный сайт этого редактора 

Данный редактор является визуальным микроредактором. Под микроредактором я имею ввиду редактор, код которого собран в один или несколько файлов js, в которых нет сложной взаимоинтеграции по файлам. Т.е. пути в таком редакторе могут быть легко подправлены путем строковых операций.

Существенные преимущества - низкие требования. Достаточно даже IE 6.0!!! Пример теста на Windows 98 fe с последним IE 6.0: 

 

 

Но и в современных браузерах, которые являются сборками Chrome - чувствует себя прекрасно. При этом, если скачать данный редактор, то структура каталога загрузки будет выглядеть таким образом: 

 

 

Как видно из скриншота такой редактор легко можно интегрировать в обработку и спокойно носить с собой. Однако возникает вопрос, а как его подключить в различных режимах приложения 1С? Если в Толстом и Тонком клиенте все элементарно, ничего придумывать для этого не требуется (можно использовать методы, описанные в публикации TinyMCE редактор HTML WYSIWYG. Интеграция во все виды управляемого и обычного приложения), то ситуация с ВебКлиентом значительно хуже - там нужен или внешний каталог или метод развертки редактора на сервере

Для демонстрации этапов внедрения по методу развертки редактора на сервере выберем 2 компьютерные платформы: 

  1. 1С 8.3.20.Эта практически последняя версия 1С на апрель 2022. 
  2. 1С 8.2.12. Эта одна из самых первых реализаций 1С 8.2, которая стала доступна публично.

А для работы с мобильным приложением выберем версию 8.3.19.59  и Эмулятор Андроид BlueStarks 5.0.

Поэтому для начала рассмотрим как интегрировать в Управляемое приложение в режим WebКлиент (и заодно мобильное приложение - здесь они будут одинаковы). 

 

Интеграция в ВебКлиент и мобильное приложение микроредактор NicEdit

Самым проблемным местом в интеграции выступает в первую очередь ВебКлиент, так как для него не предусмотрены функции для работы с файлами (ради справедливости файловые методы в браузерах появились тоже не очень рано, а до их появления использовали java-апплеты)

Итак, для этого режима примем следующее: 

Вставка картинки в веб-клиент осуществляется по методу: 

  1. Получить двоичные данные картинки. 
  2. После этого получить "постоянную" ссылку на картинку из "временного хранилища". 

Формула постоянной ссылки на картинку:

ПолучитьНавигационнуюСсылкуИнформационнойБазы()+"/"+ПоместитьВоВременноеХранилище(ДвоичныеДанные)

Эта ссылка будет одинаковой как на Сервере, так и на Клиенте. Теперь остался только последний этап интеграции - необходимо загнать код редактора в HTML поле. 

Ну для этого можно использовать следующий код: 

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

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

 Этот кусок кода как видно выше, осуществляет простую сборку текста следующим образом: 

  1. Получаем 3 макета: редактор, Содержимое Страницы (СодержимоеHTML), Макет - картинка. 
  2. Формируем единоличную ссылку на временное хранилище для картинки (нужна для панели управления). 
  3. В Содержимое HTML по шаблону интегрируем редактор и затем выводим его в поле ввода. 

Результат: 

 

 

Как видно из скриншота - редактор работает в тестовом режиме. Основной недостаток такого редактора его низкая функциональность и отсутствии русского языка локализации. 

Для мобильного приложения код интеграции будет таким:

&НаСервере
Процедура ПриСозданииНаСервере(Отказ, СтандартнаяОбработка)
	//Вставить содержимое обработчика
	ОбъектО=РеквизитФормыВЗначение("Объект");
	Макет=ОбъектО.ПолучитьМакет("Макет");
	//ТекстРедактора=ОбъектО.ПолучитьМакет("Редактор").ПолучитьТекст();
	////Начинаем компоновать пути к скриптам:
	//ТекстHTML=ОбъектО.ПолучитьМакет("СодержимоеHTML").ПолучитьТекст();  
	//ТекстHTML=ПолучитьТекстИзHTMLМакета(ОбъектО.ПолучитьМакет("СодержимоеHTML"));
	
	Макет2=ОбъектО.ПолучитьМакет("Редактор2"); 
	ВременныйФайл=ПолучитьИмяВременногоФайла("txt");	
    Макет2.Записать(ВременныйФайл); 
	Чтение2=новый ЧтениеТекста;
	Чтение2.Открыть(ВременныйФайл);
	ТекстРедактора=Чтение2.Прочитать();
    Чтение2.Закрыть();
	УдалитьФайлы(ВременныйФайл);
	
	
	Макет2=ОбъектО.ПолучитьМакет("СодержимоеHTML3"); 
	ВременныйФайл=ПолучитьИмяВременногоФайла("txt");	
    Макет2.Записать(ВременныйФайл); 
	Чтение2=новый ЧтениеТекста;
	Чтение2.Открыть(ВременныйФайл);
	ТекстHTML=Чтение2.Прочитать();
    Чтение2.Закрыть();
	УдалитьФайлы(ВременныйФайл);
	
	ЭтаФорма.Реквизит1=ПоместитьВоВременноеХранилище(Макет);
	ТекстРедактора=	СтрЗаменить(ТекстРедактора,
	"../nicEditorIcons.gif",ЭтаФорма.Реквизит1);
	
	ТекстHTML=СтрЗаменить(ТекстHTML,"scripttext",ТекстРедактора);	
	
    HTML =ТекстHTML;

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

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

Результат:

 

 

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

Интеграция в Обычное приложение микроредактор NicEdit.

Эта задача тривиальна, тем не менее, чтобы не плодить макеты приведу код, макеты которого расположены в обработке, работающей только на платформе для ПК: 

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

Здесь все похоже на управляемые формы за исключением: 

  1. Мы получаем ссылку не на хранилище, а на сам файл. Следовательно слэш с прямого надо менять на обратный в имени временного файла.
  2. Для того, чтобы активировать редактор нужно сгенерированный код записать в временный HTML документ, и затем выполнить принудительный переход на получившийся файл. 

Результат:

 

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

Заключение:

Я показал интеграцию только самого простого микроредактора. На самом деле их ещё больше, и уместить в одну статью процессы интеграции невозможно, тем не менее, при правильном подборе таких редакторов можно существенно расширить функционал - в ряде случаев он получается больше, чем стандартный 1С функционал для HTML документа в обычном приложении.

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

См. также

Сервисы интеграции без Шины и интеграции

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

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

13.03.2024    2483    dsdred    16    

56

Поинтегрируем: сервисы интеграции – новый стандарт или просто коннектор?

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

В платформе 8.3.17 появился замечательный механизм «Сервисы интеграции». Многие считают, что это просто коннектор 1С:Шины. Так ли это?

11.03.2024    5678    dsdred    53    

80

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

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

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

24.01.2024    5697    YA_418728146    25    

67

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

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

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

11.12.2023    6841    dsdred    36    

113

1С-ная магия

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

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

06.10.2023    18917    SeiOkami    46    

118

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

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

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

14.09.2023    12546    human_new    27    

75

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

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

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

28.08.2023    9257    YA_418728146    6    

143

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

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

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

20.08.2023    6466    sebekerga    54    

95
Комментарии
Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. Steelvan 302 11.04.22 15:26 Сейчас в теме
... решил написать собственную конфигурацию для автоматизации техподдержки ...

Рука-лицо, без комментариев.
Каждый прог должен написать свою задачницу, мда.

Свой перенумератор уже пройденный этап ? ;)

---

Чем зрительный правщик на основе Форматированный документ не устроил ?
Ладно бы хоть таблички были, так ведь отсутствуют.
4. user1206119 80 11.04.22 22:06 Сейчас в теме
Отвечаю: недостатки форматированного документа:
1. Частые сбои. На мобильном приложении до версии 8.3.17 были регулярные замечания по этому объекту.
2. Не возможно прикрутить дополнительные стили и скрипты. Например, в одной из публикаций народ на javascript писал функционал для вставки картинки из буфера. К Форматированному документу не прикрутишь - он режет скрипты, и в некоторых случаях даже css.
3. Поле HTML документа допускает максимальную гибкость доработки - что хочешь и как хочешь.
4. У форумчан были ещё и свои замечания по этому типу документа.
5. Он универсален - используется как на обычных формах, так и на управляемых формах. Форматированный документ на обычные формы с командной панели не прикрутишь. А в ином случае толку от него ноль - с текстовым возни меньше.
Недостаток:
1. Нужен нормальный редактор HTML. Тот, что я привел - самый простой, и он просто хорошо демонстрирует подход.
2. sapervodichka 6793 11.04.22 15:31 Сейчас в теме
3. user1206119 80 11.04.22 21:58 Сейчас в теме
Это уже второй редактор. Он просто самый простой для интеграции был. Есть ещё один, о нем будет отдельная статья. Тут я описал технологию, как интегрировать компактный визуальный редактор, и при этом не создавая отдельную директорию на сервере (основная проблема TinyMCE - там так не сделаешь).
5. Asmody 12.04.22 13:31 Сейчас в теме
А как работают кнопки "Вставить картинку"/"Загрузить картинку"?
6. user1206119 80 12.04.22 14:54 Сейчас в теме
В этом редакторе я этого функционала не видел, но так как он разрабатывался для IE 6.0 могу сказать, что скорее всего он работать не будет для 1С. Есть в поиске публикации как вставить картинку из буфера, потому эту часть придётся дописать на 1С механизмах, или же использовать js.
7. Asmody 13.04.22 09:48 Сейчас в теме
(6) на сайте NicEdit в примерах есть такая кнопка


На ваших скринах я такого не вижу, поэтому спросил.
Оставьте свое сообщение