Разбираемся с web-kit в 1С, на примере интеграции TinyMCE в управляемую форму в УТ 11.4. Допиливаем обмен с сайтом в УТ 11.4

08.12.19

Интеграция - Сайты и интернет-магазины

Многие уже знают, что в релизе платформы 8.3.14.1565, браузер Internet Explorer был заменен на Web-Kit, это на самом деле большой шаг вперед, но я уверен, многим, как и мне, пока не совсем понятно, что к чему. Возник опыт использования web-kit в 1С, вызова JS из 1С и вызова 1С из JS. Давайте вместе попробуем понять, чем одно отличается от другого, и заодно сделаем, что-нибудь полезное. Да и наверняка многим придется переписывать свои подобные поделки после обновления на новую платформу, так что надеюсь мой опыт окажется полезным.

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

Наименование Файл Версия Размер
HTML описание номенклатуры для обмена с сайтом УТ 11.4.:
.cfe 409,25Kb
32
.cfe 409,25Kb 32 Скачать

Все началось с того, что возникла задача: "Хотим, в УТ, вводить форматированное описание для товара, чтобы оно потом летело в интернет-магазин", потому что стандартное описание для товара прилетает сплошной строкой без переносов и выглядит очень не очень. Сразу возникло желание использовать форматированный документ, там и редактор простенький есть, и в HTML можно выгрузить. Но как только я показал сформированный форматированным документом HTML веб-разработчикам, они сразу замахали руками и сказал, что так не пойдет. На сайте уже есть свои стили для отображения нужных блочных элементов и поведение такого рода текста может стать непредсказуемым.

Функция ПолучитьHTML, форматированного документа возвращает полностью сформированную страницу HTML, со всей структурой тегов, а что самое неприятное, с inline-стилями. Выглядит это так. 
 

<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta name="format-detection" content="telephone=no" />
<style type="text/css">
body{margin:0;padding:8px;}
p{line-height:1.15;margin:0;white-space:pre-wrap;}
ol,ul{margin-top:0;margin-bottom:0;}
img{border:none;}
li>p{display:inline;}
</style>
</head>
<body>
<p><span style="text-decoration: underline;">Абзац</span></p>
<p><span style="font-weight: bold;">жирный текст</span></p>
<p><span style="color: #ff0000;font-weight: normal;">красный текст</span></p>
<p><br></p>
</body>
</html>

И если получить содержимое тега body это простая задача, то заниматься парсингом и вырезать атрибуты стиля из тегов совсем не хотелось. 

TinyMCE же возвращает приятного вида верстку. Позволяя себе inline-стили только в случае с цветом, что уже гораздо лучше.

<p>Абзац</p>
<p><strong>Жирный</strong></p>
<p><span style="color: #ff0000;">Красный</span></p>



Было принято решение интегрировать сторонний редактор текста 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: 

  1. Основной объект ПоляHTML теперь имеет другую структуру и, для того чтобы работать с содержимым страницы нужно использовать свойство defaultView
     
    Элементы.ПолеHTML.Document.DefaultView
    раньше для этого использовалось свойство parentWindow
    Элементы.ПолеHTML.Document.parentWindow

     

  2. Запрет на использование eval, который раньше повсеместно использовался для вызова JS кода. Что-то вроде этого 

    Элементы.ПолеHTML.Document.parentWindow.eval("alert('Вызов кода из 1С')")

    Зато можно обращаться к методам напрямую из 1С. 

    Элементы.ОписаниеHTML.Document.DefaultView.НазваниеМетодаJS();

    И я быстро соорудил оберточные функции для всех методов Tiny которые мне нужны.
     

    function GetText(){
    	return tinyMCE.activeEditor.getContent({format: "text"});
    }
    function SetText(html){
    	return tinyMCE.activeEditor.setContent(html);
    }
    function GetHTML(){
    	return tinyMCE.activeEditor.getContent();
    }
    

    К которым дальше обращался из 1С так

    ОбъектHTML = Элементы.ОписаниеHTML.Document.DefaultView;
    		
    ОписаниеHTMLДляСайта = ОбъектHTML.GetHTML();
    Описание = ОбъектHTML.GetText();
    

    Хотя можно было бы обойтись и прямыми обращениями к объекту редактора, например так 

    Элементы.ПолеHTML.Документ.defaultView.tinyMCE.activeEditor.getContent()

           

Сразу была скачана обработка из публикации (автору отдельный респект), которая показала мне много интересностей. Она более-менее работала на IE, но на webkit не работал копи-паст, сначала это вызвало ступор, но дальше стало понятно, что это из-за iframe поле HTML не активировалось при нажатии внутри него, так как нажатие фактически происходило во вложенном документе HTML, события которого где-то застревали по пути к 1С. И потому если нажать Ctrl+C в одном месте формы и попытаться вставить внутри поля редактора, то текст вставится в том поле откуда был копирован потому что поле HTML документа не активируется. То же происходит и в обратном случае, сочетания клавиш для копирования и вставки не работают.

 

 

Сначала возникла мысль, что это косяк Tiny, и он блокирует непосредственную вставку из буфера, как CKEditor, который предлагает отдельное окно для вставки из буфера. Но проверить это было довольно легко, я создал пустой документ с одним полем ввода и попробовал копирования и вставки

Как видите все работает. Значит проблема где-то в Tiny или во взаимодействии с 1С.

 

3. Решение

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

Верстка выглядит примерно так:

<body> 
	<textarea id="editor"></textarea>
	<button id="button1c" style="display: none"></button>
</body>

И функция для вызова события нажатия на кнопку

function clickButton() 
{
  button1c.click();
}

Раньше можно было передать объект формы 1С в поле HTML как объект, и из-за того, что IE подключался к 1С по COM, форма как-то сама конвертировалась в понятный для IE объект и можно было вызывать экспортный функции формы 1С прямо из кода JS. Теперь так нельзя.

Была изучена документация по API Tiny, и найдена конструкция для перехвата обработчиков событий и подходящая комбинация событий, которая должна активировать поле HTML документа

tinymce.activeEditor.on('click', function(e){clickButton(e)});

tinymce.activeEditor.on('KeyDown', function(e){clickButton(e)});

 

Нужно поместить этот код в том месте, когда Tiny уже проинициализровался. Я сделал это в обработчике onload объекта window. Но можно сделать более красиво и разместить код при инициализации Tiny в параметре:

 

init_instance_callback

 

Теперь все должно быть в порядке. И форма должна работать как надо...

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

На этой записи видно, что если нажать в строку, где мигает курсор, то фокус поля работает как нужно, но если нажать ниже, то активации поля не происходит.

Это был досадный артефакт, и попытки понять, что происходит не давали никакого решения. Я выводил алерты в обработчик и алерты выводились, но 1С не реагировала на событие ПриНажатии

Внезапно пришла в голову идея, а что, если 1С не успевает обработать событие происходящее в поле, что если немного затормозить выполнение JS скрипта, и посмотреть, что получится. Быстро была реализована функция паузы в JS с помощью промисов и async await. Как видите в JS ее тоже нет по умолчанию и ничего, живут люди)

function sleep(ms){

  return new Promise(resolve => setTimeout(resolve, ms));

}

async function clickButton(e){

  await sleep(1);

  button1c.click();

}

 

Здесь я устанавливаю задержку в одну миллисекунду, перед нажатием на кнопку. И вуаля, все заработало. 1С стала вовремя обрабатывать нажатие на кнопку.

 

4. Допиливаем обмен

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

ТекстыЗапросов.Номенклатура = СтрЗаменить(ТекстыЗапросов.Номенклатура, "Номенклатура.Описание",
												"Номенклатура.ОписаниеHTML_ОписаниеHTMLДляСайта");

На этом все. Запускаем обмен и все работает, остается только внести изменения на сайте, если это нужно, чтобы описание товара воспринималось как верстка а не как строка.

Резюме

На данном примере я попробовал взаимодействие JS WebKit и 1С, пособирал грабли и нашел решение.

Возможно для решения этой задачи было проще распарсить и очистить HTML-текст из форматированного документа, но было бы не так интересно и возможно получило бы какие-то проблемы при каких-то сложных вариантах форматирования)

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

См. также

API-интеграция 1С с маркетплейсами ОЗОН, WildBerries, Я.Маркет, СберМегаМаркет, Стройландия, Леруа Мерлен, Hoff, AliExpress для УТ11, КА2, ERP2, УНФ, БП3, Розница, УТ10, УПП1.3

Сайты и интернет-магазины Платформа 1С v8.3 1С:Комплексная автоматизация 1.х 1С:Управление торговлей 10 1С:Розница 2 1С:Управление производственным предприятием 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Бухгалтерия 3.0 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 1С:Розница 3.0 Беларусь Россия Управленческий учет Платные (руб)

Модуль для интеграции с маркетплейсами ОЗОН, WildBerries, Я.Маркет, СберМегаМаркет, Стройландия, Леруа Мерлен, Hoff, AliExpress. При помощи расширения поддерживаются следующие методы: обмен остатками товаров, обмен ценами, обработка заказов, печать стикеров, загрузка отчетов комиссионеров по API (в том числе Я.Маркет). Подходит для конфигураций Беларуси. Поддержка искусственного интелекта GigaChat

59990 руб.

05.09.2023    7113    87    74    

68

Интеграция Альфа Авто 5 / Альфа Авто 6 и AUTOCRM / Инфотек

Сайты и интернет-магазины WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 1С:Управление торговлей 11 Автомобили, автосервисы Россия Управленческий учет Платные (руб)

Интеграционный модуль обмена между конфигурацией Альфа Авто 5 и Альфа Авто 6 и порталом AUTOCRM. Данный модуль универсален. Позволяет работать с несколькими обменами AUTOCRM разных брендов в одной информационной базе в ручном и автоматическом режиме. Без существенных изменений типовой конфигурации. Проверено с брендами: Интеграция 1С и GEELY Интеграция 1С и HAVAL Интеграция 1С и KIA Интеграция 1С и FORD Интеграция 1С и LADA ГАРАНТИЯ 100% ВНЕДРЕНИЯ!

36000 руб.

03.08.2020    15730    10    17    

11

Оплата покупок "Долями" в 1С:Розница 2.3 (для работы с сервисом dolyame.ru)

Сайты и интернет-магазины Платформа 1С v8.3 1С:Розница 2 Розничная и сетевая торговля (FMCG) Россия Платные (руб)

Готовое интеграционное решение для оплаты покупок Долями в 1C:Розница 2.3. Реализовано в виде расширения. Интеграция сервиса dolyame.ru для приема платежей в рассрочку.

18000 руб.

19.12.2023    1173    6    1    

6

SALE! 15%

Обмен данными с сайтом. БП 3.0

Оптовая торговля Розничная торговля Сайты и интернет-магазины Платформа 1С v8.3 Бухгалтерский учет 1С:Бухгалтерия 3.0 Россия Бухгалтерский учет Платные (руб)

Обмен данными с сайтом на платформе 1С:Битрикс (и подобными) для 1С: Бухгалтерия предприятия 3.0.

12000 10200 руб.

18.03.2019    31270    109    100    

62

Интеграция 1С — Битрикс24. Обмен задачами

Сайты и интернет-магазины Интеграция WEB-интеграция Платформа 1С v8.3 Конфигурации 1cv8 Управленческий учет Платные (руб)

Интеграция 1С и Битрикс24. Разработка имеет двухстороннюю синхронизацию 1С и Битрикс24 задачами. Решение позволяет создавать пользователя в 1С из Битрикс24 и наоборот. Данная разработка технически подходит под все основные конфигурации линейки продуктов 1С:Предприятие 8.3 (8.3.18.1289). При приобретении предоставляется 1 месяц бесплатных обновлений разработки. Доступна демо-версия продукта с подключением Вашего Битрикс24

5040 руб.

04.05.2021    17547    6    15    

13

SALE! 33%

«Мониторинг цен» – сервис для отслеживания цен конкурентов на ведущих маркетплейсах России

Маркетплейсы Сайты и интернет-магазины 8.3.14 1С:Управление нашей фирмой 1.6 1С:ERP Управление предприятием 2 1С:Управление торговлей 11 1С:Комплексная автоматизация 2.х 1С:Управление нашей фирмой 3.0 Платные (руб)

Сервис помогает отслеживать цены на ведущих маркетплейсах России только для одного региона – Москва и Московская область. Выполняйте анализ и контролируйте цены Ваших конкурентов сразу в системе 1С.

2400 1608 руб.

29.05.2023    6648    25    37    

15

Выгрузка для АВИТО

Сайты и интернет-магазины Платформа 1С v8.3 1С:Розница 2 1С:Управление нашей фирмой 1.6 1С:Управление торговлей 11 Россия Платные (руб)

Выгрузка товаров услуг из 1С для сайта "Авито" раздел "Автозагрузка" выполнена в виде обработки. Обработка подходит для конфигураций УТ, УНФ и Розница. Данная обработка позволяет создавать шаблон с объявлениями для "Авито" - "Автозагрузка".

4200 руб.

07.06.2022    15340    42    56    

37
Комментарии
В избранное Подписаться на ответы Сортировка: Древо развёрнутое
Свернуть все
1. пользователь 08.12.19 20:26
(0) нужно больше таких материалов про WebKit.

Плюсую.
pbahushevich; TuneSoft; EVKash; TreeDogNight; A_Max; 07Iris; dabu-dabu; kolya_tlt; Batman; 1Cappldev; user774630; Бэнни; +12 Ответить
2. Бэнни 203 08.12.19 22:26 Сейчас в теме
(1) дополнил текст некоторыми пояснениями про изменения в вызове кода из 1С)
TreeDogNight; YPermitin; user774630; +3 Ответить
3. 1Cappldev 09.12.19 07:45 Сейчас в теме
(2) Я также присоединяюсь. Автор, спасибо за статью, позновательно.
4. OneEset 09.12.19 09:06 Сейчас в теме
Ах... Вы! А я на кликбейт попался))
Дмитрий74Чел; TreeDogNight; Бэнни; +3 Ответить
5. Ropotun 09.12.19 13:55 Сейчас в теме
"Так как 1С не разрешает подгружать на страницу в поле HTML локальные файлы из файловой системы"

Неправда, позволяет.

У меня есть работающий пример интеграции, где структура папок TinyMCE скидывается на диск, а потом в поле HTML документа прописываем ссылку на Индекс.

Костыли с буфером обмена решаются выключением аддона Paste
6. Бэнни 203 09.12.19 14:16 Сейчас в теме
(5) ссылку на индекс? это значит, что у вас уже есть сформированный файл с версткой лежащий в файловой системе, в который подключена библиотека?
7. Ropotun 09.12.19 14:19 Сейчас в теме
(6). Да. Готовый HTML с подключённым редактором и стилями. В который контент можно загружать уже функциями 1С
8. Бэнни 203 09.12.19 14:22 Сейчас в теме
(7) я не зря использовал слово "подгружать") Сформировать внутри 1С текст верстки страницы и написать там что-то вроде <sc ript src="файловый путь">, не удастся, получить доступ к локальному файлу библиотки из поля HTML мы не можем. Потому единственный вариант, без cdn или веб-сервера, это заранее сформированная страница, которая уже содержит все подключения, что я и использую в своей разработке
9. Ropotun 09.12.19 14:26 Сейчас в теме
(8) А зачем подключать содержимое редактора как файл на диске? Мы можем загрузить содержимое прямо в редактор из 1С.
10. Бэнни 203 09.12.19 14:31 Сейчас в теме
(9) Можем, но это особенность поляHTML 1C, которую я описал) для тех кто не в теме, может быть непонятным, почему верстка написанная файлом HTML запускается в обычном браузере, но при этом будучи скопированной в поле HTML не работает, и если делать интеграцию локальных скриптов в полеHTML то можно потерять время.
23. АртемВС 15.02.20 16:32 Сейчас в теме
(5) Вот тут https://infostart.ru/public/22237/ (обычное приложение) структура папок TinyMCE сохраняется на диск, создается html с подключенным редактором, а потом используется метод Перейти() поля HTML. В поле управляемой формы его нет.

Если я правильно понял, то у вас подобное решение , но как вы прописывали ссылку на файл на диске?
24. Ropotun 17.02.20 10:33 Сейчас в теме
(23) Папочка с редактором хранится в макете. Когда нужно открыть редактор первый раз, он разворачивается в каталоге временных файлов, и Путь типа "C:\Users\....\index.html" напрямую присваивается реквизиту формы, который является источником данных для поля HTML документа. То есть никаких "Перейти()", просто при открытии формы присваиваем ВизуальныйРедактор (реквизит формы - источник данных) = ПутьКВизуальномуРедактору

Дальше, после формирования документа нужно загрузить туда как минимум изначальный текст, может понастраивать параметры или или ещё чего - продолжение инициализации прописывается в событие "ДокументСформирован" поля HTML документа
АртемВС; +1 Ответить
25. АртемВС 17.02.20 11:14 Сейчас в теме
11. ntemny 62 09.12.19 16:26 Сейчас в теме
У меня тоже в вебките не всегда работает событие приНажатии, хз почему. Обошел функцией добавитьОбработчик на onclick и ondblcklick. С ней все работает прекрасно.
Бэнни; +1 Ответить
12. support 4484 10.12.19 10:58 Сейчас в теме
Поддержу автора, а то все лайкают, но никто не скачивает )
Бэнни; +1 Ответить
17. Бэнни 203 13.12.19 13:22 Сейчас в теме
(12)Спасибо за поддержку)
13. amd1986 10.12.19 15:10 Сейчас в теме
К сожалению web-kit пока сыроват. И сделать что нить крутое и стабильное пока нельзя. По типу такого...
Прикрепленные файлы:
Бэнни; +1 Ответить
14. Бэнни 203 10.12.19 15:15 Сейчас в теме
(13)А с какими трудностями столкнулись? Выглядит как встроенная веб-версия whatsapp
16. amd1986 10.12.19 15:26 Сейчас в теме
(14)1) На разных браузерах разное отображение страниц. Т.е. верстка может поехать
2) Заблокирована работа из внешних устройств. Например камера и микрофон не работает
3) Веб сокеты не работают
4) Костыльное выполнение скриптов на странице
5) Глюки работы с фреймами
6) Какой то баг с кодировками. Например не удается передать файл, в котором русское название.

Это так, для начала.
svilsa; tumr; +2 Ответить
15. amd1986 10.12.19 15:26 Сейчас в теме
18. untru 13 15.12.19 20:45 Сейчас в теме
Поставил расширение,
У меня такие глюки:
При нажатии правой кнопки вместо изображения в левом правом углу появляется окошко с кнопками "вперед" "назад"
Иногда при открытии просто черное поле http://prntscr.com/qb65xo

Сталкивались? Есть ли решение?
19. Бэнни 203 18.12.19 18:48 Сейчас в теме
(18)а какая версия платформы?
20. untru 13 18.12.19 21:10 Сейчас в теме
22. Бэнни 203 19.12.19 12:00 Сейчас в теме
(20)у конфигурации режим совместимости стоит?
21. Бэнни 203 19.12.19 11:59 Сейчас в теме
Оставьте свое сообщение