Написать настоящее руководство меня сподвигли 2 вещи:
- Комментарии пользователей к моей публикации Использование HTML Редактора NicEdit в 1С 8.2 и 1С 8.3 платформах.
- Просмотр публикаций Inforstart.
В результате анализа публикаций выяснилось, что они содержат в большинстве своем 2 проблемы:
- Использование узких приемов. В частности, метод eval или запуск приложений. Этот метод не работает для ВебКлиента (можно создать экплоит), и не очень для мобильного приложения.
- Для ВебКлиента и мобильного приложения (что редко) используется вариант создания каталога на Сервере и настройка к каталогу редактора пути.
Если резюмировать, то все публикации рассматривают 2 метода доработки HTML поля и форм (за редким исключением):
- Разработка собственного редактора HTML на платформе. Подход ограничивается самой платформой - переход с 8.2 на 8.3 сопровождается проблемами с преобразования синхронных вызовов в асинхронные.
- Использование готового редактора HTML, написанного на Javascript. Этот подход достаточно гибкий, и дает много бонусов, однако есть некоторые особенности использования подхода.
Про первый подход можно сказать следующее: он пагубный по той простой причине, что внедрение изменений в 1С синтаксис может привести к необходимости в тяжелых случаях писать редактор с нуля. Достаточно отметить, что переход с 8.1 на 8.2 - это головная боль, поскольку формат обработки 8.1 и 8.2 различны и это создавало ранее определенные трудности. Тем не менее, редактор, который будет работать на экране смартфона придется писать именно таким путем, так как размеры HTML поля сведут на нет все достижения визуальных редакторов - по крайней мере командную панель точно придется делать самописной.
Теперь рассмотрим про типологию визуальных редакторов HTML.
Микро и Макро редакторы HTML.
Под этими понятиями, можно сказать следующее: эти редакторы различаются только по одному единственному признаку - степенью разбросанности кода по файлам.
Поясню на примере. Редактор TinyMCE даже старых версий имеет в своем составе очень много скриптов, которые связаны между собой и не всегда связи однозначные (модули используются в разных JS файлах):
И ещё не очень понятно, как эти плагины разложены в главном файле - надо смотреть. Скорее всего, проще будет сделать корневую папку, и привязать к нему путь в Конфигурации или Обработке. Такие редакторы, я называю макроредакторами.
А что же тогда под микроредакторами? Это редакторы, дистрибутивы которых крайне малы по количеству файлов. Например, каталоги редакторов NicEditor, CleEditor, Ckeeditor.
Иногда редактор можно обрезать по размерам (убрать старый функционал) - пример whizzywig. Очень здоровая корневая папка, минимальный размер выглядит так:
Т.е., эти редакторы характеризуются крайне малым количеством исходников, что позволяет их разворачивать динамически при создании формы. Именно об этом подходе в более детальном изложении и пойдет речь.
Динамическая сборка редактора - альтернатива статическому каталогу во временной папке.
Прежде чем перейти к изложению структуры методики надо оговориться:
- Данный поход получает максимальную эффективность на управляемых формах, и в первую очередь в режиме ВебКлиента. На обычных формах в виду обильных средств платформы способ можно не использовать.
- Данный подход можно использовать на любом клиенте и на любых формах.
Структура подхода.
Данный подход основан на 2-х приемах:
- Структура работы с изображениями, которые лежат во временном хранилище на управляемых формах. Или во временном каталоге для обычных форм.
- Методика Генерации файлов редактора по данным макета и хранение во временном хранилище.
Как уже было описано - основа это временное хранилище.
Картинка во временном хранилище или каталоге.
ДЛЯ УПРАВЛЯЕМЫХ ФОРМ.
При помещении картинки во временное хранилище на сервере формируется её адрес. Основным достоинством этого адреса при передачи состоит в том, что он не меняется как на Сервере, так и на Клиенте. А значит, для управляемого приложение использовать временное хранилище можно вполне как директорию сервера (что и делается во многих приемах интерфейса).
Тем не менее для картинок рекомендуется использовать следующую формулу пути:
ПолучитьНавигационнуюСсылкуИнформационнойБазы()+"/"+ПоместитьВоВременноеХранилище(ДвоичныеДанные,новый УникальныйИдентификатор)
Такая ссылка на серверное расположение прекрасно работает на Клиенте (1С это спокойно подгружает сама).
ДЛЯ ОБЫЧНЫХ ФОРМ.
Там работает следующий способ:
- Создаем временный файл с расширением как у картинки.
- Заполняем временный файл двоичными данными.
- В полученном пути меняем "/" на "\".
Пример кода:
ВременныйФайл=ПолучитьИмяВременногоФайла("png");
Макет.Записать(ВременныйФайл);
ПутьПравильногоВременногоФайла=СтрЗаменить(ВременныйФайл,"\","/");
Таким образом картинка (панель управления редакторов) у нас подгружена. Однако, встает вопрос - а как можно включить редактор в работу?
Способ простой сборки микроредакторов для отображения на обычном и управляемом интерфейсах.
Сначала отметим, что макеты редакторов формируются таким образом:
- Макет панели управления. Это картинка, и она всегда хранится в двоичных данных. Как с ней работать описал выше.
- Макет документа. Поскольку редакторы, которые подключают написаны на JS, то лучший способ это сделать с минимальной кровью заключается в добавлении в HTML заготовку такой конструкции:
<script type="text/javascript">
scripttext
</script>
Текст scripttext нужен только для замены уже готового редактора, который будет вставлен в HTML шаблон. HTML шаблон можно сделать из примеров с дистрибутивов, так как он же подготовлен разработчиком.
А вот сборка самого редактора такая:
- Все макеты сохраняем одинаковыми с загрузкой. Это позволит обновить редактор максимально быстро.
- Сборка состоит из:
- Чтение макетов (текст или двоичнка с конвертацией в текст для мобильного приложения).
- Если файл не один - собираем в один модуль весь функционал.
- По выбору выражений сцепляем языковой пакет, если предусмотрен.
- Итоговый редактор сцепляем с HTML выводом.
Собранный редактор вытаскиваем в HTML:
- Для УФ:
- Код вставляем в поле формы на сервере.
- Для всех кроме веба на клиенте - полученный код из поля перезаписываем во временный файл. Меняем код на ссылку на временный файл. Это защищает от ошибок работы 1С.
- Для ОБ:
- Код во временный файл.
И последнее - написать обработчики со стороны 1С : чтение и запись кода HTML в редактор - строковая операция на сервере по шаблону для занесения.
Операция чтения выполняется на клиенте из выбранного в документе элемента.
Способ вытаскивания результата из HTML поля. (обновление от 17.03.2023)
В результате анализа поведения поля HTML на платформах 8.2.9 и 8.3.20 на различных типах клиента (тонкий, толстый, веб, мобильный под андроид) было установлено, что лучшим способом организации возврата является создание специальной функции-обертки, которая помещается внутрь макета. Например, для редактора whizzywig из публикации используется следующий код на js:
function EditorIdShowHTML() {
whizzywig.makeSo("html");
return document.getElementById("sixth").value;
}
function EditorIdShowDesign() {
whizzywig.showDesign();
return document.getElementById("sixth").value;
}
После добавления этих функций в макет пишем функцию возврата на 1С, которую надо вызывать в событии перед записью на Обычных и Управляемых формах.
&НаКлиенте
Функция ВернутьHTMLИзРедактора(ОписаниеЗадачиHTML) экспорт
ДокументПервогоБраузера = ОписаниеЗадачиHTML.Документ;
ОкноПервогоБраузера = ДокументПервогоБраузера.parentWindow; // IE
Если ОкноПервогоБраузера = Неопределено Тогда
ОкноПервогоБраузера = ДокументПервогоБраузера.defaultView; // Прочие браузеры
КонецЕсли;
Текст=СокрЛП(ОкноПервогоБраузера.EditorIdShowHTML()); //непосредственный возврат.
ОкноПервогоБраузера.EditorIdShowDesign();
возврат Текст;
КонецФункции
Указанная функция принимает на вход поле HTML документа.
Заключение:
В данной статье постарался детальнее описать, как в целом интегрировать HTML редакторы, написанные на JS, чтобы их можно было использовать полноценно.
Вступайте в нашу телеграмм-группу Инфостарт