markdownEditor

markdownEditor - это поле для написания и предварительного просмотра содержимого Markdown. Оно работает как стандартное поле ввода, поэтому поддерживает надпись, вспомогательный текст, индикатор обязательности, сообщение валидации, всплывающую подсказку и привязку данных.

XML-элемент

markdownEditor

Java-класс

JmixMarkdownEditor

Атрибуты

id - alignSelf - ariaLabel - ariaLabelledBy - autofocus - classNames - colspan - css - dataContainer - enabled - errorMessage - focusShortcut - height - helperText - justifySelf - label - maxHeight - maxWidth - minHeight - minWidth - mode - placeholder - property - readOnly - required - requiredMessage - tabIndex - themeNames - valueChangeMode - valueChangeTimeout - visible - width

Обработчики

AttachEvent - BlurEvent - ComponentValueChangeEvent - DetachEvent - FocusEvent - ModeChangeEvent - statusChangeHandler - validator

Элементы

tooltip - validators

Основы

Используйте markdownEditor, когда пользователям нужно вводить Markdown с быстрыми средствами форматирования и мгновенным предварительным просмотром.

<markdownEditor id="markdownEditor"
                themeNames="toolbar-align-end"
                label="Markdown Editor"
                helperText="Markdown is supported. Use the toolbar or keyboard shortcuts to format text."
                placeholder="Write your content here..."/>
markdown editor

Значение компонента - это String, содержащая исходную Markdown-разметку.

Привязка данных

Как и другие компоненты полей, markdownEditor можно привязать к атрибуту сущности с помощью атрибутов dataContainer и property.

<markdownEditor id="descriptionField"
                dataContainer="orderDc"
                property="description"
                label="Description"/>

Привяжите компонент к атрибуту сущности типа String, который хранит Markdown-текст.

Режимы

Редактор имеет два режима, которые можно выбрать в заголовке:

  • Edit позволяет пользователям вводить и форматировать Markdown-текст.

  • Preview отображает текущее значение как отформатированный HTML.

Режим по умолчанию - Edit.

Начальный режим можно декларативно задать с помощью XML-атрибута mode.

<markdownEditor id="markdownEditorField"
                mode="PREVIEW"/>

Если readOnly = true, компонент показывает только отрендеренный предварительный просмотр. Панель инструментов и вкладки режимов скрыты, а значение нельзя изменить.

Текущий режим также можно читать и изменять программно с помощью server-side API. При изменении режима компонент генерирует ModeChangeEvent, содержащий новый режим и флаг, который показывает, было ли изменение инициировано пользователем или приложением.

Действия панели инструментов

В режиме Edit вкладки режимов и панель инструментов форматирования находятся в одной строке заголовка. Если горизонтального пространства недостаточно, дополнительные действия панели инструментов переносятся в меню переполнения в конце строки.

Кнопки панели инструментов отражают форматирование, активное в текущей позиции курсора. Нажатие на уже активную кнопку форматирования удаляет соответствующее форматирование.

Форматы-обертки

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

Действие Сочетание клавиш Применение Удаление

Bold

Cmd/Ctrl+B

Оборачивает выделенный текст в **. Если ничего не выделено, вставляет **** и помещает курсор между маркерами.

Удаляет окружающие **.

Italic

Cmd/Ctrl+I

Оборачивает выделенный текст в _. Если ничего не выделено, вставляет __ и помещает курсор между маркерами.

Удаляет окружающие _.

Code

Cmd/Ctrl+E

Оборачивает выделенный текст в один обратный апостроф. Если ничего не выделено, вставляет два обратных апострофа и помещает курсор между ними.

Удаляет окружающие обратные апострофы.

Link

Cmd/Ctrl+K

Оборачивает выделение в виде [text](url). Если ничего не выделено, вставляет [](url) и помещает курсор внутрь [].

Удаляет окружающую Markdown-разметку ссылки.

Построчные форматы

Эти действия работают с текущей строкой или с каждой выделенной строкой, если выбрано несколько строк.

Действие Применение Удаление

Heading

Добавляет префикс ## в начало строки.

Удаляет префикс ## .

Quote

Добавляет префикс > в начало строки.

Удаляет префикс > .

Unordered list

Добавляет префикс - в начало строки.

Удаляет префикс - .

Ordered list

Добавляет префикс 1. в начало строки.

Удаляет префикс нумерованного списка.

Task list

Добавляет префикс - [ ] в начало строки.

Удаляет префикс - [ ] .

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

Навигация с клавиатуры

Компонент поддерживает навигацию с клавиатуры между тремя логическими областями фокуса:

  • Вкладки режимов

  • Панель инструментов

  • Текстовая область

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

Если некоторые действия панели инструментов перенесены в меню переполнения ···, при открытии меню фокус получает первый пункт. В меню клавиши ArrowUp и ArrowDown перемещают между пунктами, а Escape и Tab закрывают меню и возвращают фокус на кнопку переполнения.

Изменения форматирования интегрируются со стеком отмены браузера, поэтому стандартные сочетания клавиш работают ожидаемым образом:

  • Cmd/Ctrl+Z отменяет изменения форматирования и ввода.

  • Cmd/Ctrl+Shift+Z или Ctrl+Y повторяет изменения форматирования и ввода.

Варианты темы

Используйте атрибут themeNames для настройки темы компонента.

Вариант Описание Поддерживается в

helper-above-field

Отображает вспомогательный текст над полем, под надписью.

Aura, Lumo

toolbar-align-start

Выравнивает кнопки панели инструментов по начальной стороне заголовка с учетом текущего направления текста.

Aura, Lumo

toolbar-align-center

Выравнивает кнопки панели инструментов по центру заголовка и скрывает разделитель.

Aura, Lumo

toolbar-align-end

Выравнивает кнопки панели инструментов по конечной стороне заголовка с учетом текущего направления текста и скрывает разделитель.

Aura, Lumo

CSS-свойства

Вы можете настроить компонент с помощью пользовательских CSS-свойств в теме приложения или задав их через атрибут css.

<markdownEditor id="markdownEditCss"
                css="--jmix-markdown-editor-default-width: 32rem;
                     --jmix-markdown-editor-header-background: var(--lumo-contrast-5pct);"/>
Свойство Описание Поддерживается в

--jmix-markdown-editor-default-width

Задает ширину компонента по умолчанию.

Aura, Lumo

--jmix-markdown-editor-header-background

Задает фон общей строки заголовка, содержащей вкладки и панель инструментов.

Aura, Lumo

--jmix-markdown-editor-toolbar-button-padding

Управляет внутренними отступами кнопок панели инструментов.

Aura, Lumo

--jmix-markdown-editor-toolbar-button-border-width

Управляет шириной границы кнопок панели инструментов.

Aura, Lumo

--jmix-markdown-editor-toolbar-button-border-color

Управляет цветом границы кнопок панели инструментов.

Aura, Lumo

--jmix-markdown-editor-toolbar-button-border-radius

Управляет радиусом скругления кнопок панели инструментов.

Aura, Lumo

--jmix-markdown-editor-toolbar-button-text-color

Управляет цветом текста кнопок панели инструментов.

Aura, Lumo

--jmix-markdown-editor-toolbar-button-background

Управляет фоном кнопок панели инструментов.

Aura, Lumo

--jmix-markdown-editor-tab-padding

Управляет внутренними отступами вкладок.

Aura, Lumo

--jmix-markdown-editor-tab-text-color

Управляет цветом текста вкладок.

Aura, Lumo

--jmix-markdown-editor-tab-background

Управляет фоном вкладок.

Aura, Lumo

Интернационализация

Все видимые пользователю строки по умолчанию заданы на английском языке и могут быть переопределены независимо друг от друга.

Компонент предоставляет подписи по умолчанию для:

  • Вкладок: Edit, Preview

  • Действий панели инструментов: Heading, Bold, Italic, Quote, Code, Link, Unordered list, Ordered list, Task list

  • Кнопки меню переполнения

  • Доступного имени панели инструментов

Если приложение переопределяет только часть этих строк, все остальные подписи продолжают использовать значения по умолчанию.

Валидация

Чтобы проверять значения, введенные в компонент markdownEditor, можно использовать validator во вложенном элементе validators.

Поскольку значение компонента хранится как исходная Markdown-строка, валидаторы notBlank и size полезны для проверки того, что содержимое присутствует и имеет ожидаемую длину.

Для markdownEditor доступны следующие предопределенные валидаторы:

XML-элемент

validators

Предопределенные валидаторы

custom - notBlank - notEmpty - notNull - size

Атрибуты

Общие атрибуты служат одной и той же цели для всех компонентов. Следующие атрибуты являются специфичными для markdownEditor:

Имя

Описание

По умолчанию

mode

Задает mode редактора.

EDIT

Обработчики

Общие обработчики настраиваются одинаково для всех компонентов. Следующие обработчики являются специфичными для markdownEditor.

Чтобы сгенерировать заглушку обработчика в Jmix Studio, используйте вкладку Handlers панели инспектора Jmix UI, или команду Generate Handler, доступную на верхней панели контроллера экрана и через меню Code → Generate (Alt+Insert / Cmd+N).

Имя

Описание

ModeChangeEvent

JmixMarkdownEditor.ModeChangeEvent генерируется, когда редактор переключается между Edit и Preview mode. Событие содержит новый режим и флаг, указывающий, было ли изменение инициировано пользователем или приложением.

Смотрите также

Смотрите также markdown для отображения содержимого Markdown без возможностей редактирования.