Markdown 编辑器 & 渲染
MdEditor 提供 Markdown 编辑能力（工具栏、分屏预览、快捷键），MdRender 用于纯渲染展示 Markdown 文档内容。底层基于 marked 解析，完整支持 GFM 语法。
MdEditor Markdown 编辑器
基础用法
通过 v-model 双向绑定 Markdown 内容，默认分屏模式。
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
当前内容长度：286
视图模式
view-mode-prop 切换编辑 / 分屏 / 预览三种视图。
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
禁用与只读
disabled 禁止交互，readonly 仅可阅读不可编辑。
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
隐藏工具栏
hide-toolbar 隐藏工具栏，适用于简洁场景。
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
字数统计
maxlength + show-count 显示字数统计。
11/200
统计字数的示例文本……
自定义高度
height 设置编辑器高度，支持数字(px)或 CSS 字符串。
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
图片上传
支持三种方式插入图片：工具栏按钮选择文件、编辑区粘贴图片、拖拽图片到编辑区。默认将图片转为 base64，可通过 upload-fn 自定义上传逻辑。
图片上传示例
点击工具栏图片按钮选择文件，或直接粘贴 / 拖拽图片到编辑区。
MdRender Markdown 渲染
基础渲染
传入 Markdown 文本，渲染为带样式的 HTML。
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
不同尺寸
size 控制字号大小。
size = "sm"
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
size = "md"
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
size = "lg"
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
编辑器 + 渲染联动
在编辑器中输入内容，实时用 MdRender 渲染展示。
编辑区
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
渲染区
标题一
标题二
这是一段 粗体、斜体、删除线 和 行内代码 的示例。
- 无序列表项 1
- 无序列表项 2
- 无序列表项 3
- 有序列表项 1
- 有序列表项 2
引用文本
| 列1 | 列2 | 列3 |
|---|---|---|
| A | B | C |
| D | E | F |
console.log('Hello, Markdown!')
- 已完成任务
- 未完成任务
API
MdEditor Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
modelValue | string | '' | Markdown 内容，支持 v-model |
placeholder | string | '请输入 Markdown 内容...' | 占位文本 |
disabled | boolean | false | 是否禁用 |
readonly | boolean | false | 是否只读 |
hideToolbar | boolean | false | 是否隐藏工具栏 |
viewModeProp | 'edit' | 'split' | 'preview' | 'split' | 初始视图模式 |
height | string | number | 400 | 编辑器高度，数字为 px |
maxlength | number | - | 最大输入长度 |
showCount | boolean | false | 是否显示字数统计 |
autofocus | boolean | false | 是否自动聚焦 |
accept | string | 'image/*' | 上传文件类型限制 |
uploadFn | (file: File) => Promise<string> | - | 自定义上传函数，接收 File 返回图片 URL；不传则转 base64 |
MdEditor Events
| 事件名 | 回调参数 | 说明 |
|---|---|---|
update:modelValue | (val: string) | 内容变化时触发 |
change | (val: string) | 内容变化时触发 |
focus | (e: FocusEvent) | 获得焦点时触发 |
blur | (e: FocusEvent) | 失去焦点时触发 |
upload-success | (payload: { file: File; url: string }) | 图片上传成功时触发 |
upload-error | (payload: { file: File; error: Error }) | 图片上传失败时触发 |
MdEditor Methods
| 方法名 | 参数 | 说明 |
|---|---|---|
focus | () | 聚焦编辑器 |
blur | () | 失焦编辑器 |
getViewMode | () => ViewMode | 获取当前视图模式 |
setViewMode | (mode: ViewMode) | 设置视图模式 |
triggerUpload | () | 手动触发文件选择弹窗 |
MdRender Props
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
content | string | '' | 要渲染的 Markdown 文本 |
size | 'sm' | 'md' | 'lg' | 'md' | 渲染字号大小 |