MarkdownEditor
带净化、工具栏和 WYSIWYG/source/preview 模式的 Markdown 编辑器。
MarkdownEditor
基础用法
MarkdownEditor
示例加载中...
交互契约
- 提供
mode时组件处于受控模式；否则用defaultMode初始化内部模式。 - 用户切换模式时会发出
update:mode与mode-change。 sanitize默认是true；只有内容已经可信时才关闭。- Source 模式直接编辑 Markdown；WYSIWYG 模式会在输入时把 DOM 序列化回 Markdown。
- 工具栏动作在各模式复用，但 preview 模式会禁用编辑动作。
- 模式切换器是一个切换按钮组：容器是
role="group"（标注 "Markdown editor mode"），每个模式按钮通过aria-pressed反映当前模式（不是role="tab"，因为没有对应的 tabpanel）。 theme="auto"监听documentElement的 class /data-theme，无法判断时回退到 light。
API
Props
| 属性名 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue / v-model | string | '' | Markdown 源。 |
placeholder | string | '' | 编辑模式占位文本。 |
mode | 'wysiwyg' | 'source' | 'preview' | - | 受控编辑模式。 |
defaultMode | 'wysiwyg' | 'source' | 'preview' | 'wysiwyg' | 初始内部模式。 |
disabled | boolean | false | 禁用工具栏和字段。 |
readonly | boolean | false | 禁止编辑但允许阅读。 |
sanitize | boolean | true | 使用 DOMPurify 净化渲染 HTML。 |
theme | 'auto' | 'light' | 'dark' | 'auto' | 编辑器主题。 |
toolbar | boolean | true | 显示工具栏和模式切换器。 |
toolbarActions | MarkdownEditorToolbarActionKey[] | 内置集合 | 工具栏动作顺序。 |
minHeight | string | number | 220 | 编辑器主体最小高度。 |
maxHeight | string | number | - | 编辑器主体最大高度。 |
linkPrompt | (selectedText: string) => string | Promise<string> | - | link 动作使用的异步 URL 提供函数。 |
工具栏动作
heading、bold、italic、strike、quote、code、bulletList、orderedList、link、undo、redo。
Slots
不暴露公开插槽；工具栏按钮、编辑区和预览输出都是内部结构。
Events
| 事件名 | 参数 | 说明 |
|---|---|---|
update:modelValue | (value: string) | v-model 更新。 |
change | (value: string) | Markdown 内容变化。 |
update:mode | (mode: MarkdownEditorMode) | 受控模式更新。 |
mode-change | (mode: MarkdownEditorMode) | 模式变化。 |
focus | () | 编辑区域或 source 字段聚焦。 |
blur | () | 编辑区域或 source 字段失焦。 |
Exposed Methods
| 方法 | 说明 |
|---|---|
focus() | 聚焦当前可编辑区域。 |
blur() | 让当前可编辑区域失焦。 |
setMode(mode) | 切换编辑模式。 |
getMode() | 返回当前模式。 |
getValue() | 返回当前 Markdown 源。 |
setValue(value) | 设置 Markdown、发出更新并刷新渲染 HTML。 |
最佳实践
- 用户或 provider 生成内容保持
sanitize=true。 - 需要把编辑器 tab 写入路由/query 时使用受控
mode。 - 发布说明、评论等窄场景应限制
toolbarActions。 - URL 弹窗属于产品语境，使用
linkPrompt注入，不要让组件自己拥有业务弹窗。
审阅说明
- 已人工核对
packages/tuffex/packages/components/src/markdown-editor/src/types.ts、TxMarkdownEditor.vue、markdown-serializer.ts与markdown-editor.test.ts。 - 默认通过 DOMPurify 开启净化；
sanitize=false只应作为可信内容的逃生口。 linkPrompt是收集业务 URL 的扩展点，让弹窗留在组件契约之外。
Source
- Component source:
packages/tuffex/packages/components/src/markdown-editor/src/TxMarkdownEditor.vue。 - Types:
packages/tuffex/packages/components/src/markdown-editor/src/types.ts。 - Serializer:
packages/tuffex/packages/components/src/markdown-editor/src/markdown-serializer.ts。 - 实测覆盖: Coverage:
packages/tuffex/packages/components/src/markdown-editor/__tests__/markdown-editor.test.ts验证导出、净化后的 WYSIWYG 渲染、source 模式输入更新、非受控模式事件、role="group"/aria-pressed模式切换器，以及富文本内容重新序列化为 Markdown。
查看源码
packages/tuffex/packages/components/src/markdown-editor/index.ts