При работе с управляемыми формами в 1С:Предприятии и использовании элемента "Поле HTML документа" разработчики часто сталкиваются с задачами по отображению динамического контента, включая изображения, а также по предоставлению пользователям возможности редактировать этот контент. Рассмотрим подробно две распространенные проблемы, которые обсуждаются в нашей теме: некорректное отображение изображений, закодированных в Base64, и способы включения режима редактирования для текста в HTML-поле.
Исходная проблема, с которой столкнулся пользователь, заключалась в том, что изображения, вставляемые в HTML-документ с использованием Data URI в формате Base64, не отображались на рабочем сервере, хотя локально на компьютере разработчика они показывались корректно. Код вставки выглядел следующим образом:
<img src="data:image/;base64,iVBORw0KGgo.....">
Критическая ошибка в данном синтаксисе — это отсутствие полного и корректного MIME-типа. После префикса data:image/ обязательно должен следовать точный тип изображения, например, png, jpeg, gif и т.д. В данном случае использовался лишь обрезанный вариант data:image/;base64,.
Мы выясняем, что некоторые современные браузеры (или их версии) могут быть достаточно «умными», чтобы попытаться самостоятельно определить тип изображения, даже если он указан не полностью. Именно поэтому на локальном компьютере, где, вероятно, установлена более новая версия браузера или настроек по умолчанию, изображение отображалось корректно. Однако на рабочем сервере, где часто используются более старые или менее настроенные версии браузеров (например, Internet Explorer, который 1С может использовать по умолчанию для рендеринга HTML), такая снисходительность отсутствует, и некорректный Data URI приводит к ошибке отображения (черный крест вместо картинки).
Для исправления этой проблемы необходимо убедиться, что в Data URI указан полный и правильный MIME-тип изображения. Если ваше изображение в формате PNG, то корректный синтаксис будет:
<img src="data:image/png;base64,iVBORw0KGgo.....">
Если изображение в формате JPEG:
<img src="data:image/jpeg;base64,iVBORw0KGgo.....">
После внесения этого изменения изображения начнут корректно отображаться как на локальном компьютере, так и на рабочем сервере, поскольку все браузеры будут однозначно понимать, какой тип данных им предоставлен.
Рассмотрим дополнительные моменты, которые могут влиять на отображение HTML-контента в Поле HTML документа:
<meta http-equiv="X-UA-Compatible" content="IE=edge">
Однако, это не всегда гарантирует полный успех, поскольку может зависеть от настроек самого сервера и групповых политик браузера. Также можно попробовать указать конкретную версию, например content="IE=9" или content="IE=11".
Если изображения достаточно велики или используются многократно, рекомендуем рассмотреть возможность сохранения их как отдельные файлы на сервере (например, в базе данных или на диске) и ссылки на них по URL. Для вложений (например, в электронной почте, отправляемой через 1С) более подходящим может быть использование ссылок по CID (Content-ID).
Второй вопрос, который задал автор темы, касался возможности предоставления пользователям редактировать текстовую информацию непосредственно в "Поле HTML документа". Мы рассмотрим, как это реализовать.
Самый простой и быстрый способ сделать любой HTML-элемент редактируемым пользователем напрямую в браузере — это использовать глобальный атрибут contenteditable="true".
Мы можем применить этот атрибут к любому блочному элементу (например, <div>, <p>, <span> с примененным стилем display: block) в вашем HTML-коде, который вы передаете в "Поле HTML документа" 1С. Например, если у вас есть блок с текстом, который пользователь должен редактировать, вы можете оформить его так:
<div contenteditable="true" style="border: 1px solid #ccc; padding: 10px; min-height: 100px;">
<p>Здесь пользователь может вводить и редактировать текст.</p>
<ul>
<li>Пункт 1, который можно изменить</li>
<li>Пункт 2, также доступен для редактирования</li>
</ul>
</div>
После этого пользователь сможет кликнуть по содержимому этого <div> и начать вводить или изменять текст, прямо как в обычном текстовом редакторе. Браузер будет автоматически управлять базовыми операциями редактирования, такими как вставка, удаление, а также базовым форматированием (например, жирный, курсив, подчеркивание), если это поддерживается браузером и контекстом.
Хотя contenteditable="true" кажется простым решением, есть несколько важных аспектов, которые нам следует учитывать при его использовании в 1С:
innerHTML редактируемого элемента и передаст его обратно в 1С через механизм взаимодействия с HTML-документом.contenteditable="true". Пользователь может ввести или вставить любой HTML-код, включая потенциально вредоносные скрипты. При сохранении содержимого обратно в базу данных 1С или при отображении его другим пользователям, вы обязательно должны выполнять санитарную обработку (очистку) пользовательского ввода на стороне сервера. Это означает удаление всех потенциально опасных тегов (таких как <script>, <iframe>, <object>), атрибутов (например, обработчиков событий типа onload, onclick, onerror) и других элементов, которые могут быть использованы для атак межсайтового скриптинга (XSS). Используйте библиотеки или функции, предназначенные для HTML-санитайзинга.contenteditable="true" предоставляет базовые возможности редактирования, он не является полноценным визуальным редактором. Для расширенного форматирования (изменение шрифтов, цветов, выравнивание текста, вставка таблиц, списков, изображений с возможностью загрузки и т.д.) потребуется интеграция сторонних JavaScript-редакторов (например, NicEdit, CKEditor, TinyMCE). Это гораздо более сложная задача, требующая генерации HTML-кода, который включает JS-библиотеки редактора, и последующего взаимодействия с ними через программный интерфейс 1С.ФорматированныйДокумент, который является более нативным и безопасным способом работы с форматированным текстом в управляемых формах. Он предоставляет богатые возможности по редактированию и отображению форматированного текста, включая картинки, таблицы, списки, и обладает встроенным редактором. Если вам нужен сложный текстовый редактор с большим набором функций, мы рекомендуем рассмотреть возможность использования ФорматированныйДокумент вместо "Поля HTML документа", так как это может быть более интегрированным и менее затратным в плане разработки и поддержки решением для 1С.ДокументHTML. Это позволяет динамически изменять элементы, добавлять новые, получать их значения и т.д. Например, методы ПолучитьЭлементыПоИмени(), СоздатьЭлемент(), ДобавитьДочерний() могут быть полезны для манипуляций с HTML-структурой, но они не предоставляют готового пользовательского интерфейса для интерактивного редактирования. Эти методы используются для генерации или модификации HTML-кода до его отображения или после получения отредактированного пользователем содержимого.Решение проблем с "Полем HTML документа" в 1С требует понимания как веб-стандартов (HTML, CSS, Data URI), так и особенностей работы платформы 1С с этими стандартами. Корректное указание MIME-типа для Base64-изображений является ключевым для их отображения, а атрибут contenteditable="true" предоставляет базовый, но мощный инструмент для включения режима редактирования, при этом требующий внимательности к вопросам безопасности и функциональности. Всегда анализируйте требования к функционалу и выбирайте наиболее подходящий инструмент, будь то "Поле HTML документа" с доработками или более нативный "Форматированный документ".