Как реализовать расширенное форматирование текста и работу с HTML в 1С?

Программист 1С v8.3 (Управляемые формы) IT и автоматизация бизнеса
← На главную

При разработке интерфейсов для работы с электронной почтой, базами знаний или тикет-системами (например, в решениях класса ITIL) часто требуется предоставить пользователю возможность оформления текста: изменение шрифтов, цветов, добавление списков, таблиц и отступов. В платформе 1С:Предприятие эту задачу можно решить двумя принципиально разными путями: с помощью нативного элемента ФорматированныйДокумент или посредством интеграции веб-редактора в ПолеHTMLДокумента. Разберем по шагам оба подхода, их особенности, методы работы и сопутствующие ограничения.

Вариант 1. Использование штатного объекта «ФорматированныйДокумент»

Самый простой и быстрый способ добавить визуальное форматирование на управляемую форму — использовать встроенный тип данных ФорматированныйДокумент. Этот объект предоставляет готовую командную панель со стандартным набором инструментов для работы со шрифтами, выравниванием и цветом.

Рассмотрим порядок настройки реквизитов формы:

  1. Создадим на форме реквизит с типом ФорматированныйДокумент.
  2. Перетащим его в элементы формы. Платформа автоматически создаст элемент управления и подключит к нему панель форматирования.
  3. Для хранения данных в базе (в реквизите справочника или документа) используем тип ХранилищеЗначения. При чтении данных извлекаем объект из хранилища, а при записи — упаковываем обратно.

Выясним причину частой проблемы при работе с почтой: как загрузить в форматированный документ входящий текст письма, оформленный в виде HTML. Для этого в платформе предусмотрен штатный метод УстановитьHTML. Проанализируем его синтаксис:

ФорматированныйДокумент.УстановитьHTML(<ТекстHTML>, <Вложения>)

Параметры метода:

  1. ТекстHTML — обязательный строковый параметр, содержащий HTML-разметку.
  2. Вложения — обязательная структура, содержащая данные вложенных файлов и графических объектов. Ключ структуры — идентификатор или имя файла, значение — объект Картинка.

Посмотрим на пример серверной процедуры, выполняющей загрузку разметки и последующую обратную выгрузку в строку HTML:


&НаСервере
Процедура ЗагрузитьHTMLВФорматированныйДокумент(ТекстHTML, СтруктураВложений)
    
    // Преобразуем входящий HTML в ФорматированныйДокумент
    ФорматированныйДокументРеквизит.УстановитьHTML(ТекстHTML, СтруктураВложений);
    
КонецПроцедуры

&НаСервере
Функция ВыгрузитьHTMLИзФорматированногоДокумента(СтруктураВложений)
    
    // Получаем строку HTML и извлекаем новые вложения
    ТекстHTML = "";
    ФорматированныйДокументРеквизит.ПолучитьHTML(ТекстHTML, СтруктураВложений);
    
    Возврат ТекстHTML;
    
КонецФункции

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

Кроме того, нативный ФорматированныйДокумент имеет ряд архитектурных ограничений:

  1. Урезанная поддержка CSS: платформа очищает сложные селекторы, сторонние стили, блочные контейнеры (div) и скрипты, что может нарушить верстку сложных входящих писем.
  2. Отсутствие интерактивной работы с таблицами: даже если готовая таблица из HTML отобразится в поле, стандартная командная панель форматированного документа не позволяет пользователю изменять структуру строк и колонок или создавать новые таблицы.
  3. Необходимость ручной обработки картинок: внутренние графические элементы (с ссылками вида cid:) нужно программно извлекать из письма и передавать в структуру вложений отдельным списком.

Вариант 2. Интеграция стороннего JS-редактора через «ПолеHTMLДокумента»

В тиражных отраслевых конфигурациях (включая ITIL и продвинутые системы документооборота) разработчики чаще выбирают более функциональный подход — использование элемента формы ПолеHTMLДокумента. Внутрь этого поля загружается веб-страница с готовым WYSIWYG-редактором на JavaScript (например, TinyMCE, CKEditor, Quill или Summernote).

Разберем по шагам, как устроено такое взаимодействие:

  1. Подготовка макета: в макет конфигурации с типом ДвоичныеДанные или ТекстовыйДокумент помещаются файлы HTML-страницы, скрипты редактора и стили оформления.
  2. Инициализация в форме: при открытии формы в элемент ПолеHTMLДокумента загружается HTML-шаблон. Текст для редактирования подставляется в разметку на этапе генерации страницы либо передается динамически через DOM-модель.
  3. Вызов функций редактора из 1С: для управления редактором из кода платформы в толстом и тонком клиентах под Windows используется прямое обращение к DOM-модели документа через свойство Элементы.ПолеHTML.Документ.defaultView, что позволяет выполнять JavaScript-функции.
  4. Возврат данных в 1С: для передачи отредактированного текста обратно в платформу скрипт редактора генерирует фиктивную навигацию (например, устанавливает переход по ссылке вида v8:saveContent?...). На стороне 1С перехватывается событие элемента формы ПриНажатии или событие перехода по URL, после чего переданные данные считываются и сохраняются в реквизитах формы.

При использовании поля HTML важно учитывать кроссплатформенность решения:

  1. Движки рендеринга: в зависимости от версии платформы и операционной системы внутри поля могут использоваться WebKit, Chromium Embedded Framework или системный веб-компонент ОС. Выбираемый JavaScript-редактор должен быть нейтрален к движку и поддерживать базовые стандарты HTML5/CSS3.
  2. Ограничения веб-клиента: при работе через браузер прямой доступ к внутреннему DOM поля HTML часто блокируется политикой безопасности Same-Origin Policy. В таком случае обмен данными строится исключительно через события формы или штатные механизмы сообщений платформы.

Таким образом, если перед нами стоит задача быстро предоставить пользователю базовое форматирование шрифтов и списков, оптимальным выбором будет нативный ФорматированныйДокумент с вызовами УстановитьHTML на сервере. Если же требуются полноценная работа с таблицами, гибкая разметка писем и богатая панель инструментов, задачу следует решать интеграцией стороннего JavaScript-редактора в ПолеHTMLДокумента.

← На главную