1с поле html документа webkit
Заметки из Зазеркалья
Данная статья является анонсом новой функциональности.
Не рекомендуется использовать содержание данной статьи для освоения новой функциональности.
Полное описание новой функциональности будет приведено в документации к соответствующей версии.
Полный список изменений в новой версии приводится в файле v8Update.htm.
Реализовано в версии 8.3.14.1565.
В клиентских приложениях для операционной системы Windows вместо Internet Explorer мы задействовали библиотеку WebKit. Это позволяет унифицировать работу элементов управления, использующих браузер, а также избавиться от проблем, связанных с ошибками Internet Explorer.
Элементы управления, использующие браузер
В платформе 1С:Предприятия существует несколько прикладных и системных элементов, работа которых в операционной системе Windows основывается на COM-объекте движка Internet Explorer. Это такие элементы как:
В разных версиях Windows используются разные версии Internet Explorer, зачастую устаревшие. Это сильно усложняет разработку функциональности, основанной на браузере. Причём это справедливо как для вас, прикладных разработчиков, так и для нас, когда мы разрабатываем платформу 1С:Предприятия.
Клиентские приложения, работающие под управлением операционных систем Linux и macOS, вместо COM-объекта Internet Explorer используют библиотеку WebKit. Это свободная кроссплатформенная библиотека с открытым исходным кодом. В результате DOM-модель HTML документа, полученная через свойство поля Документ (ПолеФормы.Документ), в этих клиентских приложениях может отличаться от аналогичной DOM-модели в клиентском приложении в операционной системе Windows. Это также усложняет разработку прикладной функциональности, работающей одинаково на разных операционных системах.
Преимущества перехода на WebKit
Перевод всех клиентских приложений на использование WebKit даёт следующие преимущества:
Реализация
Последний пункт предыдущего списка нужно пояснить подробнее. В отличие от Internet Explorer библиотека WebKit содержит открытый исходный код, поэтому мы можем самостоятельно исправлять какие-то её проблемы, если они возникают.
Мы используем доработанную библиотеку WebKit, и поставляем её вместе с дистрибутивом платформы.
В первую очередь доработка потребовалась потому, что прикладные решения 1С:Предприятия могут работать под управлением операционной системы Windows XP, а стандартный WebKit её уже не поддерживает. Мы реализовали такую поддержку в нашей библиотеке WebKit.
Также открытый исходный код этой библиотеки даёт нам возможность разобраться в нюансах поведения и проблемах, а также самостоятельно поддерживать актуальность этой библиотеки в платформе 1С:Предприятия.
Влияние на существующую функциональность
В результате перехода на WebKit тип свойства Документ у поля, имеющего вид ПолеHTMLДокумента, изменится с COMОбъект на ВнешнийОбъект. Также изменится DOM модель документа, доступная через это свойство.
Если при разработке функциональности вы учитывали рекомендации для операционных систем Linux и macOS, то никаких проблем возникнуть не должно.
В противном случае вам нужно проверить, что задействованы только стандартные элементы DOM модели, которые доступны во всех вариантах работы, и не являются специфичными для конкретного веб-браузера.
1С html. Cоздание поля html документа
В статье на примере будут описаны все этапы создания поля html документа. В 1с html поле позволяет представить данные, которые не требуется редактировать, в более эстетичном виде. Разработчик может применить возможности html для создания и настройки формы справочника или бизнес-процесса (как делается в конфигурации Документооборот).
Рассмотрим пример. Разработаем обработку, которая будет представлять элемент справочника Пользователи в виде поля html документа. Для разработки примера я использовал демо БСП 3.1 (управляемое приложение).
Выведем в документ следующие поля справочника:
Размещение реквизитов на форме
Для начала создадим внешнюю обработку и добавим форму. На форме создадим два реквизита Пользователь (тип СправочникСсылка.Пользователи) и ПредставлениеHTML (тип Строка неограниченной длины). Перетащим реквизиты в дерево элементов. Для элемента ПредставлениеHTML выберем вид Поле HTML документа и отключим отображение заголовка. Должно получится так:
Теперь поработаем над программной частью формы:
В итоге должно получиться следующее:
Получение данных
Во входные параметры функции ЗаполнитьHTMLПредставление мы передаем только ссылку на пользователя, поэтому для начала надо собрать все данные, необходимые для вывода в html документ. Для этого воспользуемся запросом, который вынесем в отдельную процедуру. Приводить текст процедуры здесь я не буду, чтобы не занимать много места. Ознакомиться с ним можно во внешней обработке, ссылка на которую находится внизу статьи.
Функция возвращает структуру, в которой содержится две выборки. Первая, ВыборкаДанных — содержит одну строку с основными данными пользователя. Вторая, ВыборкаКонтактов — содержит контактную информацию пользователя, в разрезе двух полей: Вид и Представление. Вызов функции получения данных выглядит так:
Заполнение стилей 1с html поля
Рассмотрим заполнение стилей более подробно:
Создание тела html документа в 1с 8
Вывод изображения в html
Начнем с вывода фотографии пользователя. В элементе справочника она хранится в реквизите Фотография, в виде хранилища значения. Его мы получили вместе с остальными данными пользователя, при помощи запроса.
Разберем представленный код:
Для того чтобы отделить изображение от следующей информации, используем тег
. Он означает начало нового абзаца. При описании стилей мы указали, что перед началом нового абзаца устанавливается отступ в 10 пикселей.
Вывод текстового реквизита в html
После фотографии выведем основные данные пользователя в следующем формате:
Начнем с имени пользователя:
Разберем представленный код:
Вывод ссылки в html
Теперь выведем в документ физлицо пользователя. Так как оно представлено ссылочным типом, оформим его в виде ссылки.
Разберем представленный код:
Далее нам необходимо будет вывести еще один текстовый реквизит и еще один ссылочный. Для того чтобы не дублировать код вынесем добавление реквизита в html в отдельную, универсальную процедуру.
Вывод всех реквизитов будет выглядеть следующим образом:
Вывод таблицы в html 1с
Осталось вывести таблицу контактной информации пользователя. Это делается довольно просто.
На этом формирование поля html документа в 1с завершено. Осталось только закрыть теги и вернуть сформированный текст.
В итоге у нас получается html поле, заполненное следующим образом:
Обработка нажатия на ссылку
В нашей обработке мы используем не веб ссылки, а на навигационные ссылки 1с. По этой причине система не может корректно обработать их нажатие. Это можно исправить, создав обработчик события ПриНажатии, для Поля HTML документа.
В обработчике мы анализируем текст ссылки, на которую произошло нажатие. Если это навигационная ссылка, обрабатываем ее по отдельному алгоритму. Получаем текст и осуществляем переход. Таким образом при нажатии на ссылку, у нас произойдет переход на форму элемента справочника.
Скачать обработку формирования html поля можно здесь: СозданиеHTMLПоля
Разбираемся с WebKit в 1С, на примере интеграции TinyMCE в управляемую форму в УТ 11.4
Многие уже знают, что в релизе платформы 8.3.14.1565, браузер Internet Explorer был заменен на Web-Kit, это на самом деле большой шаг вперед, но я уверен, многим, как и мне, пока не совсем понятно, что к чему. Возник опыт использования web-kit в 1С, вызова JS из 1С и вызова 1С из JS. Давайте вместе попробуем понять, чем одно отличается от другого, и заодно сделаем, что-нибудь полезное. Да и наверняка многим придется переписывать свои подобные поделки после обновления на новую платформу, так что надеюсь мой опыт окажется полезным.
Все началось с того, что возникла задача: «Хотим, в УТ, вводить форматированное описание для товара, чтобы оно потом летело в интернет-магазин», потому что стандартное описание для товара прилетает сплошной строкой без переносов и выглядит очень не очень. Сразу возникло желание использовать форматированный документ, там и редактор простенький есть, и в HTML можно выгрузить. Но как только я показал сформированный форматированным документом HTML веб-разработчикам, они сразу замахали руками и сказал, что так не пойдет. На сайте уже есть свои стили для отображения нужных блочных элементов и поведение такого рода текста может стать непредсказуемым.
Функция ПолучитьHTML, форматированного документа возвращает полностью сформированную страницу HTML, со всей структурой тегов, а что самое неприятное, с inline-стилями. Выглядит это так.
И если получить содержимое тега body это простая задача, то заниматься парсингом и вырезать атрибуты стиля из тегов совсем не хотелось.
TinyMCE же возвращает приятного вида верстку. Позволяя себе inline-стили только в случае с цветом, что уже гораздо лучше.
Было принято решение интегрировать сторонний редактор текста TinyMCE. К тому же опыт его интеграции сообществом 1С уже довольно большой.
Может быть это было ошибкой тогда, и нужно было просто парсить текст сформированный форматированным документом, но имеем, что имеем.
1.Особенности решения
Так как 1С не разрешает подгружать на страницу в поле HTML локальные файлы из файловой системы, для этого обязательно нужен веб-сервер или хотя бы адрес этого файла во временном хранилище, то положить js-библиотеку Tiny рядышком с 1С и подгружать ее в заголовках HTML документа нельзя — придется сформировать еще и файл с HTML-версткой который внутри себя формирует готовое окно редактора и его уже подключать к HTML документу.
Вообще, на самом деле, подгрузить библиотеку, если получить для нее адрес в хранилище, можно, если бы она была скомпилирована в один файл, а Tiny помимо основной библиотеки содержит еще и js-файлы плагинов, менеджер стилей, и сами файлы стилей, русификаторов, иконок и т.д., и как сами понимаете это довольно сильно усложняет задачу. В одно время даже возникла идея скомпилировать все это добро в один файл и не знать проблем, но разбираться в инструментах было долго. Потом был найден TinyMCE Builder на официальном сайте, который компилирует весь js в один файл и это же было бы маленькой победой, если бы он так же поступал с css, но нет, css по-прежнему лежал рядом в нескольких папках.
TinyMCE для окна редактирования создает iframe, который сам по себе является встроенным в страницу HTML-документом, так что события возникающие в этом iframe 1С не может отследить, об этом ниже.
Конфигурация УТ 11.4 на момент разработки имела режим совместимости 8.3.12, так что по факту сейчас она использовала IE в качестве встроенного браузера, но дальнейшее обновление подразумевало переход на новые версии, которые уже используют web-kit.
2. Первые шаги
Основные отличия в работе с web-kit:
Основной объект ПоляHTML теперь имеет другую структуру и, для того чтобы работать с содержимым страницы нужно использовать свойство defaultView
раньше для этого использовалось свойство parentWindow
Запрет на использование eval, который раньше повсеместно использовался для вызова JS кода. Что-то вроде этого
Элементы.ПолеHTML.Document.parentWindow.eval(«alert(‘Вызов кода из 1С’)»)
Зато можно обращаться к методам напрямую из 1С.
Элементы.ОписаниеHTML.Document.DefaultView.НазваниеМетодаJS();
И я быстро соорудил оберточные функции для всех методов Tiny которые мне нужны.
К которым дальше обращался из 1С так
Хотя можно было бы обойтись и прямыми обращениями к объекту редактора, например так
Сразу была скачана обработка из публикации (автору отдельный респект), которая показала мне много интересностей. Она более-менее работала на IE, но на webkit не работал копи-паст, сначала это вызвало ступор, но дальше стало понятно, что это из-за iframe поле HTML не активировалось при нажатии внутри него, так как нажатие фактически происходило во вложенном документе HTML, события которого где-то застревали по пути к 1С. И потому если нажать Ctrl+C в одном месте формы и попытаться вставить внутри поля редактора, то текст вставится в том поле откуда был копирован потому что поле HTML документа не активируется. То же происходит и в обратном случае, сочетания клавиш для копирования и вставки не работают.
Сначала возникла мысль, что это косяк Tiny, и он блокирует непосредственную вставку из буфера, как CKEditor, который предлагает отдельное окно для вставки из буфера. Но проверить это было довольно легко, я создал пустой документ с одним полем ввода и попробовал копирования и вставки
Как видите все работает. Значит проблема где-то в Tiny или во взаимодействии с 1С.
3. Решение
Для решения проблемы с взаимодействием браузера и 1С был применен обычный прием, я создал невидимую кнопку на странице HTML, и планировал нажимать на нее из JS при возникновении нужных событий внутри страницы, которые 1С перехватывала бы в событии ПриНажатии HTMLДокумента. Но при каком событии осуществлять программное нажатие?
Верстка выглядит примерно так:
И функция для вызова события нажатия на кнопку
Раньше можно было передать объект формы 1С в поле HTML как объект, и из-за того, что IE подключался к 1С по COM, форма как-то сама конвертировалась в понятный для IE объект и можно было вызывать экспортный функции формы 1С прямо из кода JS. Теперь так нельзя.
Была изучена документация по API Tiny, и найдена конструкция для перехвата обработчиков событий и подходящая комбинация событий, которая должна активировать поле HTML документа
Нужно поместить этот код в том месте, когда Tiny уже проинициализровался. Я сделал это в обработчике onload объекта window. Но можно сделать более красиво и разместить код при инициализации Tiny в параметре:
Теперь все должно быть в порядке. И форма должна работать как надо…
Стало сильно лучше, поле HTML действительно стало активироваться, но не всегда, почему-то некоторые нажатия не вызывали перехода фокуса к полю:
На этой записи видно, что если нажать в строку, где мигает курсор, то фокус поля работает как нужно, но если нажать ниже, то активации поля не происходит.
Это был досадный артефакт, и попытки понять, что происходит не давали никакого решения. Я выводил алерты в обработчик и алерты выводились, но 1С не реагировала на событие ПриНажатии
Внезапно пришла в голову идея, а что, если 1С не успевает обработать событие происходящее в поле, что если немного затормозить выполнение JS скрипта, и посмотреть, что получится. Быстро была реализована функция паузы в JS с помощью промисов и async await. Как видите в JS ее тоже нет по умолчанию и ничего, живут люди).
Здесь я устанавливаю задержку в одну миллисекунду, перед нажатием на кнопку. И вуаля, все заработало. 1С стала вовремя обрабатывать нажатие на кнопку.
4. Допиливаем обмен
Так как для хранения нового описания в формате HTML, был добавлен новый реквизит к справочнику, то нам нужно подменить значение типового поля при выгрузке. Для этого в модуле ОбменССайтомПереопределяемый, добавляем в расширение функцию ПолучитьТекстыЗапросовКаталог, и пишем там:
На этом все. Запускаем обмен и все работает, остается только внести изменения на сайте, если это нужно, чтобы описание товара воспринималось как верстка а не как строка.
Резюме
На данном примере я попробовал взаимодействие JS WebKit и 1С, пособирал грабли и нашел решение.
Возможно для решения этой задачи было проще распарсить и очистить HTML-текст из форматированного документа, но было бы не так интересно и возможно получило бы какие-то проблемы при каких-то сложных вариантах форматирования.
Разбираемся с WebKit в 1С, на примере интеграции TinyMCE в управляемую форму в УТ 11.4
Многие уже знают, что в релизе платформы 8.3.14.1565, браузер Internet Explorer был заменен на Web-Kit, это на самом деле большой шаг вперед, но я уверен, многим, как и мне, пока не совсем понятно, что к чему. Возник опыт использования web-kit в 1С, вызова JS из 1С и вызова 1С из JS. Давайте вместе попробуем понять, чем одно отличается от другого, и заодно сделаем, что-нибудь полезное. Да и наверняка многим придется переписывать свои подобные поделки после обновления на новую платформу, так что надеюсь мой опыт окажется полезным.
Все началось с того, что возникла задача: «Хотим, в УТ, вводить форматированное описание для товара, чтобы оно потом летело в интернет-магазин», потому что стандартное описание для товара прилетает сплошной строкой без переносов и выглядит очень не очень. Сразу возникло желание использовать форматированный документ, там и редактор простенький есть, и в HTML можно выгрузить. Но как только я показал сформированный форматированным документом HTML веб-разработчикам, они сразу замахали руками и сказал, что так не пойдет. На сайте уже есть свои стили для отображения нужных блочных элементов и поведение такого рода текста может стать непредсказуемым.
Функция ПолучитьHTML, форматированного документа возвращает полностью сформированную страницу HTML, со всей структурой тегов, а что самое неприятное, с inline-стилями. Выглядит это так.
И если получить содержимое тега body это простая задача, то заниматься парсингом и вырезать атрибуты стиля из тегов совсем не хотелось.
TinyMCE же возвращает приятного вида верстку. Позволяя себе inline-стили только в случае с цветом, что уже гораздо лучше.
Было принято решение интегрировать сторонний редактор текста TinyMCE. К тому же опыт его интеграции сообществом 1С уже довольно большой.
Может быть это было ошибкой тогда, и нужно было просто парсить текст сформированный форматированным документом, но имеем, что имеем.
1.Особенности решения
Так как 1С не разрешает подгружать на страницу в поле HTML локальные файлы из файловой системы, для этого обязательно нужен веб-сервер или хотя бы адрес этого файла во временном хранилище, то положить js-библиотеку Tiny рядышком с 1С и подгружать ее в заголовках HTML документа нельзя — придется сформировать еще и файл с HTML-версткой который внутри себя формирует готовое окно редактора и его уже подключать к HTML документу.
Вообще, на самом деле, подгрузить библиотеку, если получить для нее адрес в хранилище, можно, если бы она была скомпилирована в один файл, а Tiny помимо основной библиотеки содержит еще и js-файлы плагинов, менеджер стилей, и сами файлы стилей, русификаторов, иконок и т.д., и как сами понимаете это довольно сильно усложняет задачу. В одно время даже возникла идея скомпилировать все это добро в один файл и не знать проблем, но разбираться в инструментах было долго. Потом был найден TinyMCE Builder на официальном сайте, который компилирует весь js в один файл и это же было бы маленькой победой, если бы он так же поступал с css, но нет, css по-прежнему лежал рядом в нескольких папках.
TinyMCE для окна редактирования создает iframe, который сам по себе является встроенным в страницу HTML-документом, так что события возникающие в этом iframe 1С не может отследить, об этом ниже.
Конфигурация УТ 11.4 на момент разработки имела режим совместимости 8.3.12, так что по факту сейчас она использовала IE в качестве встроенного браузера, но дальнейшее обновление подразумевало переход на новые версии, которые уже используют web-kit.
2. Первые шаги
Основные отличия в работе с web-kit:
Основной объект ПоляHTML теперь имеет другую структуру и, для того чтобы работать с содержимым страницы нужно использовать свойство defaultView
раньше для этого использовалось свойство parentWindow
Запрет на использование eval, который раньше повсеместно использовался для вызова JS кода. Что-то вроде этого
Элементы.ПолеHTML.Document.parentWindow.eval(«alert(‘Вызов кода из 1С’)»)
Зато можно обращаться к методам напрямую из 1С.
Элементы.ОписаниеHTML.Document.DefaultView.НазваниеМетодаJS();
И я быстро соорудил оберточные функции для всех методов Tiny которые мне нужны.
К которым дальше обращался из 1С так
Хотя можно было бы обойтись и прямыми обращениями к объекту редактора, например так
Сразу была скачана обработка из публикации (автору отдельный респект), которая показала мне много интересностей. Она более-менее работала на IE, но на webkit не работал копи-паст, сначала это вызвало ступор, но дальше стало понятно, что это из-за iframe поле HTML не активировалось при нажатии внутри него, так как нажатие фактически происходило во вложенном документе HTML, события которого где-то застревали по пути к 1С. И потому если нажать Ctrl+C в одном месте формы и попытаться вставить внутри поля редактора, то текст вставится в том поле откуда был копирован потому что поле HTML документа не активируется. То же происходит и в обратном случае, сочетания клавиш для копирования и вставки не работают.
Сначала возникла мысль, что это косяк Tiny, и он блокирует непосредственную вставку из буфера, как CKEditor, который предлагает отдельное окно для вставки из буфера. Но проверить это было довольно легко, я создал пустой документ с одним полем ввода и попробовал копирования и вставки
Как видите все работает. Значит проблема где-то в Tiny или во взаимодействии с 1С.
3. Решение
Для решения проблемы с взаимодействием браузера и 1С был применен обычный прием, я создал невидимую кнопку на странице HTML, и планировал нажимать на нее из JS при возникновении нужных событий внутри страницы, которые 1С перехватывала бы в событии ПриНажатии HTMLДокумента. Но при каком событии осуществлять программное нажатие?
Верстка выглядит примерно так:
И функция для вызова события нажатия на кнопку
Раньше можно было передать объект формы 1С в поле HTML как объект, и из-за того, что IE подключался к 1С по COM, форма как-то сама конвертировалась в понятный для IE объект и можно было вызывать экспортный функции формы 1С прямо из кода JS. Теперь так нельзя.
Была изучена документация по API Tiny, и найдена конструкция для перехвата обработчиков событий и подходящая комбинация событий, которая должна активировать поле HTML документа
Нужно поместить этот код в том месте, когда Tiny уже проинициализровался. Я сделал это в обработчике onload объекта window. Но можно сделать более красиво и разместить код при инициализации Tiny в параметре:
Теперь все должно быть в порядке. И форма должна работать как надо…
Стало сильно лучше, поле HTML действительно стало активироваться, но не всегда, почему-то некоторые нажатия не вызывали перехода фокуса к полю:
На этой записи видно, что если нажать в строку, где мигает курсор, то фокус поля работает как нужно, но если нажать ниже, то активации поля не происходит.
Это был досадный артефакт, и попытки понять, что происходит не давали никакого решения. Я выводил алерты в обработчик и алерты выводились, но 1С не реагировала на событие ПриНажатии
Внезапно пришла в голову идея, а что, если 1С не успевает обработать событие происходящее в поле, что если немного затормозить выполнение JS скрипта, и посмотреть, что получится. Быстро была реализована функция паузы в JS с помощью промисов и async await. Как видите в JS ее тоже нет по умолчанию и ничего, живут люди).
Здесь я устанавливаю задержку в одну миллисекунду, перед нажатием на кнопку. И вуаля, все заработало. 1С стала вовремя обрабатывать нажатие на кнопку.
4. Допиливаем обмен
Так как для хранения нового описания в формате HTML, был добавлен новый реквизит к справочнику, то нам нужно подменить значение типового поля при выгрузке. Для этого в модуле ОбменССайтомПереопределяемый, добавляем в расширение функцию ПолучитьТекстыЗапросовКаталог, и пишем там:
На этом все. Запускаем обмен и все работает, остается только внести изменения на сайте, если это нужно, чтобы описание товара воспринималось как верстка а не как строка.
Резюме
На данном примере я попробовал взаимодействие JS WebKit и 1С, пособирал грабли и нашел решение.
Возможно для решения этой задачи было проще распарсить и очистить HTML-текст из форматированного документа, но было бы не так интересно и возможно получило бы какие-то проблемы при каких-то сложных вариантах форматирования.