markdownEditor
markdownEditor 是一个用于编写和预览 Markdown 内容的组件。其行为与标准输入组件类似，因此支持标签、帮助文本、必填指示符、验证消息、提示窗以及 数据绑定。
XML 元素 |
|
|---|---|
Java 类 |
|
XML 属性 |
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 |
XML 内部元素 |
基本用法
使用 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 标记的 String。
数据绑定
与其他输入组件一样，markdownEditor 也可以使用 dataContainer 和 property 与实体的属性绑定。
<markdownEditor id="descriptionField"
dataContainer="orderDc"
property="description"
label="Description"/>将组件与实体中保存 Markdown 文本的 String 属性绑定。
模式
编辑器有两种模式，可通过 header 切换：
-
Edit支持用户输入和格式化 Markdown 文本。 -
Preview将当前值渲染为格式化的 HTML。
默认模式为 Edit。
可以使用 mode XML 属性以声明方式配置组件的初始模式。
<markdownEditor id="markdownEditorField"
mode="PREVIEW"/>如果 readOnly = true，组件仅显示渲染后的预览。隐藏工具栏和模式标签页，且值无法更改。
当前模式也可以通过服务端 API 进行读取和编程式更改。当模式更改时，组件会触发一个 ModeChangeEvent，事件中包含新模式以及一个标志，指示该更改是由用户还是应用程序发起的。
工具栏的操作
在 Edit 模式下，模式标签页和格式化工具栏共享同一个 header。如果没有足够的水平空间，多余的工具栏操作会被移至该行末尾的溢出菜单中。
工具栏按钮状态与当前光标位置处的格式对应。点击已激活的格式化按钮会移除相应的格式。
包装格式
这些操作作用于当前选中的内容，或者当未选中任何内容时，作用于光标位置。
| 操作 | 快捷键 | 应用 | 移除 |
|---|---|---|---|
粗体 |
|
将选中文本用 |
移除周围的 |
斜体 |
|
将选中文本用 |
移除周围的 |
代码 |
|
将选中文本用单个反引号包装。如果未选中任何内容，则插入两个反引号并将光标置于它们之间。 |
移除周围的反引号。 |
链接 |
|
将选中内容包装为 |
移除周围的 Markdown 链接标记。 |
键盘导航
该组件支持跨三个逻辑焦点区域的键盘导航：
-
模式标签页
-
工具栏
-
文本区域
Tab 键在这些区域之间移动焦点。方向键在激活区域内导航。在工具栏中按 Escape 键可将焦点返回到文本区域。
如果某些工具栏操作被移入溢出 ··· 菜单，则当菜单打开时，第一个菜单项会获得焦点。在菜单中，ArrowUp 和 ArrowDown 选择前一个和后一个菜单项，而 Escape 和 Tab 关闭菜单并将焦点返回到溢出按钮。
格式变更集成了浏览器的 undo 栈，因此标准快捷键也有效：
-
Cmd/Ctrl+Z撤销格式更改和输入更改。 -
Cmd/Ctrl+Shift+Z或Ctrl+Y重做格式更改和输入更改。
样式版本
使用 themeNames 属性设置组件样式。
| 样式 | 描述 | 支持的主题 |
|---|---|---|
|
在字段上方（标签下方）渲染帮助文本。 |
Aura, Lumo |
|
根据当前文本方向，将工具栏按钮向 header 起始侧对齐。 |
Aura, Lumo |
|
在 header 中居中对齐工具栏按钮并隐藏分隔线。 |
Aura, Lumo |
|
根据当前文本方向，将工具栏按钮向 header 末尾侧对齐，并隐藏分隔线。 |
Aura, Lumo |
CSS 属性
可以通过在应用程序主题中使用 CSS 自定义属性，或通过 css 属性来定制组件。
<markdownEditor id="markdownEditCss"
css="--jmix-markdown-editor-default-width: 32rem;
--jmix-markdown-editor-header-background: var(--lumo-contrast-5pct);"/>| 属性 | 描述 | 支持的主题 |
|---|---|---|
|
设置组件的默认宽度。 |
Aura, Lumo |
|
设置包含标签页和工具栏的共享 header 行的背景。 |
Aura, Lumo |
|
控制工具栏按钮的内边距。 |
Aura, Lumo |
|
控制工具栏按钮的边框宽度。 |
Aura, Lumo |
|
控制工具栏按钮的边框颜色。 |
Aura, Lumo |
|
控制工具栏按钮的边框圆角。 |
Aura, Lumo |
|
控制工具栏按钮的文本颜色。 |
Aura, Lumo |
|
控制工具栏按钮的背景。 |
Aura, Lumo |
|
控制标签页的内边距。 |
Aura, Lumo |
|
控制标签页的文本颜色。 |
Aura, Lumo |
|
控制标签页的背景。 |
Aura, Lumo |
国际化
所有用户可见的字符串都有英文默认值，并且可以独立覆盖。
组件为以下内容提供默认标题：
-
标签页：
Edit、Preview -
工具栏操作：
Heading、Bold、Italic、Quote、Code、Link、Unordered list、Ordered list、Task list -
溢出菜单按钮
-
工具栏可访问名称
如果应用程序只覆盖了这些字符串的一部分，所有其他标题将继续使用其默认值。
事件和处理器
参考
另请参考 markdown 了解无编辑能力的 Markdown 内容渲染。
