При разработке интерфейсов для ввода текстовых данных часто возникает задача визуального акцентирования внимания пользователя на отдельных фрагментах текста. Типичный сценарий — проверка орфографии, когда необходимо подсветить неверно написанные слова волнистой красной линией непосредственно в тексте, как это реализовано в офисных редакторах или почтовых клиентах, избегая вызова громоздких модальных окон.
Разберем подробно, почему стандартные элементы управления платформы 1С не подходят для этой цели, как решить задачу с помощью поля HTML документа и какие нюансы работы с DOM-моделью следует учитывать.
Проанализируем ситуацию со стандартными элементами формы, которые разработчики обычно выбирают для ввода текста:
Строка). Платформа 1С не предоставляет механизмов посимвольной или пословной стилизации внутри этих элементов. Шрифт, цвет и начертание применяются ко всей строке целиком, поэтому выделить отдельное ошибочное слово в них невозможно.ФорматированныйДокумент, поддерживает частичное форматирование (изменение цвета текста, фона, начертания). Однако он не поддерживает специализированное волнистое подчеркивание (стиль проверки правописания). Кроме того, программный разбор и точечная замена слов на уровне объектной модели форматированного документа сопряжены со сложным манипулированием параграфами и блоками текста.Именно поэтому оптимальным выбором для гибкого отображения и интерактивной разметки текста становится элемент формы с видом Поле HTML документа.
Рассмотрим подробнее принцип работы с HTML-полем. Основная идея заключается в формировании HTML-разметки, где проверяемый текст помещается в редактируемый блок, а ошибочные слова оборачиваются в контейнеры span с необходимыми стилями оформления.
Разберем по шагам ключевые этапы настройки такого решения:
Строка (неограниченной длины), перетаскиваем его в элементы формы и устанавливаем вид элемента Поле HTML документа.body или внутреннему div) необходимо задать атрибут contenteditable="true".text-decoration: underline wavy red; (или его расширенный аналог с указанием цвета и волнистой линии). Также можно выделить слово изменением цвета текста или фоновой заливкой.Посмотрим на пример базовой генерации HTML-страницы на стороне сервера или клиента:
Функция СформироватьHTMLТекст(ИсходныйТекст, МассивОшибок) Экспорт
Результат = ИсходныйТекст;
// Оборачиваем каждое найденное слово с ошибкой в тег span со стилем подчеркивания
Для Каждого Слово Из МассивОшибок Цикл
ШаблонЗамены = "<span style=""text-decoration: underline wavy red;"">" + Слово + "</span>";
Результат = СтрЗаменить(Результат, Слово, ШаблонЗамены);
КонецЦикла;
HTMLКод =
"<!DOCTYPE html>" +
"<html>" +
"<head>" +
" <meta charset=""utf-8""/>" +
" <style>" +
" body { font-family: Arial, sans-serif; font-size: 14px; margin: 5px; }" +
" .error-word { text-decoration: underline wavy red; }" +
" </style>" +
"</head>" +
"<body contenteditable=""true"" spellcheck=""false"">" +
Результат +
"</body>" +
"</html>";
Возврат HTMLКод;
КонецФункции
Если задача заключается исключительно в проверке правописания и нет строгой необходимости использовать конкретный внешний словарь (например, встроенные механизмы конфигурации 1С:Документооборот), можно задействовать нативные возможности движка рендеринга.
Выясним причину, почему это удобно: современные встроенные веб-браузеры в платформе 1С поддерживают глобальный HTML-атрибут spellcheck="true". Если включить его для редактируемого блока, движок операционной системы или браузера будет автоматически подчеркивать неизвестные слова красной волнистой линией и предлагать контекстное меню с вариантами исправления по правому клику мыши без написания сложного серверного кода.
// Пример минимального шаблона с нативной проверкой правописания
ТекстHTML =
"<html><body contenteditable=""true"" spellcheck=""true"" style=""font-family: Arial; font-size: 13px;"">" +
ТекстПользователя +
"</body></html>";
Элементы.ПолеHTML.Документ.body.innerHTML = ТекстHTML;
При использовании Поля HTML документа данные не синхронизируются с реквизитами формы автоматически при каждом нажатии клавиши. Рассмотрим подробнее, как организовать получение актуального текста обратно в 1С:
Элементы.ИмяПоляHTML.Документ.body.innerText (для получения чистого текста без тегов) или innerHTML (если необходимо сохранить разметку).input или blur на стороне HTML, передавая результат в платформу через механизм навигационных ссылок или перехват событий клика и взаимодействия.span непосредственно во время непрерывного ввода текста сбивает позицию курсора (каретка перемещается в начало или конец блока). По этой причине наложение стилей и проверку орфографии рекомендуется выполнять не на каждый символ, а по событию потери фокуса, с задержкой по таймеру или по явной команде пользователя.Если требуется высокая скорость работы с большими объемами текста, гибкое управление кареткой и отсутствие накладных расходов HTML-движка, разработчики прибегают к использованию внешних компонент (Native API). Встраивание специализированных редакторов (например, на базе Scintilla или RichEdit) позволяет работать с нативными индикаторами ошибок и выделения строк на уровне самого элемента управления операционной системы.