Войти
Назад

Компонент для ввода текста с форматированием (HtmlInput)

link
Скопировать прямую ссылку на статью

Общая информация

Компонент HtmlInput предназначен для форматирования набранного текста или вставки уже отформатированного текста. Форматированный текст можно сохранить в черновик в формате HTML или markdown

Поддерживаемые экраны

Компонент может быть задействован на экране типа:

Внешний вид компонента

В стандартной услуге

htmlinput_1.png

В конструкторе

htmlinput_2.png

Структура компонента HtmlInput

ВКУ JSON
№ В конструкторе Атрибут Тип Описание
1 Идентификатор компонента id string Уникальный идентификатор компонента в JSON
2 Имя компонента name string Допускается ввод любых данных для отображения в конструкторе, однако классическим видом является s1_с1, где номера — сгенерированные идентификаторы, s — экран, c — компонент
3 Заголовок компонента label string Название поля. Описывает, что пользователю необходимо ввести в отображаемое ему поле
4 Компонент обязателен для заполнения required boolean Принуждает пользователя к взаимодействию с компонентом
5 Подсказка под компонентом вместо надписи «Необязательно» customUnrecLabel string Подсказка, отображаемая в случае, если компонент не обязателен для заполнения. По умолчанию текст «Необязательно»
6 Подсказка, отображаемая под компонентом hint string Текст, который отображается под компонентом
7 Максимальное количество вводимых символов charsAmount string Максимальное количество вводимых символов
8 Сохранять текст в формате markdown в черновик transformToMarkdown boolean При включении весь текст, который отформатирован в HTML-разметке, будет конвертирован в разметку markdown и сохранён в черновик
По умолчанию сохраняет текст в черновик с HTML-разметкой
9 Настройки отображения инструментов для форматирования toolbarSettings object Настройки инструментов форматирования, отображаемых в панели инструментов
10 Отображать форматирование заголовком h5 headerVisible boolean Позволяет добавить «Заголовок h5» в панель инструментов
11 Отображать форматирование жирным шрифтом boldVisible boolean Позволяет добавить инструмент жирного начертания текста
12 Отображать форматирование маркированным списком bulletListVisible boolean Позволяет добавить инструмент маркированного списка
13 Отображать форматирование нумерованным списком numberedListVisible boolean Позволяет добавить инструмент нумерованного списка
14 Вычисляемые аргументы компонента (linkedValues) linkedValues array of objects Атрибуты компонента, позволяющие реализовать сложный функционал
15 Идентификаторы компонентов, для которых чистить кэш clearCacheForComponentIds array При переходе на следующий экран cachedValues всех указанных компонентов будут удалены

Пример JSON структуры компонента передаваемой в DTO

Если указано сохранение данных в HTML-разметке

{

 "value":"<p>Возьмите с собой следующий список документов:</p><p></p><ul><li>Паспорт</li><li>СНИЛС</li><li>ИНН</li></ul><p></p>", 

   "visited": true

}

Если указано сохранение данных в markdown-разметке

{

 "value":"<p>Возьмите с собой следующий список документов:</p><p></p><ul><li>Паспорт</li><li>СНИЛС</li><li>ИНН</li></ul><p></p>", 

   "options": {

   "markdown": "Возьмите с собой следующий список документов:* Паспорт * СНИЛС * ИНН"

   "visited": true

}

Варианты использования

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

Компонент позволяет настроить панель инструментов, доступных пользователю для форматирования текста

Авторизуйтесь, чтобы оставить комментарий к статье