企业官网建设流程全解析

• 前端
• UI组件
• 富文本

本文围绕 mavonEditor 的核心解析内核 markdown-it 展开：先讲清为什么需要拿到这个对象，再给出全局引入、局部引入、组件实例三种标准获取方式，最后通过set()、.use()与 props 联动讲解如何按需定制解析行为。读完本文，你将能够在自己的 Vue 2 项目中自由读取、改造 mavonEditor 的 markdown 解析器，例如切换换行风格、开关 HTML 标签、引入第三方语法插件。

为什么需要获取 markdown-it 对象

mavonEditor 的 Markdown → HTML 渲染并不是自己手写的，而是全部委托给开源解析器 markdown-it 完成。在 src/lib/mixins/markdown.js 中，initMarkdown()创建了唯一一个 markdown-it 实例，并一次性挂载了十余个语法插件：

// src/lib/mixins/markdown.js（节选） const markdown = new MarkdownIt(markdown_config); markdown.use(mihe, hljs_opts) // 代码高亮（highlight.js） .use(emoji) // 表情 .use(sup).use(sub) // 上标 / 下标 .use(container) // 自定义容器 .use(container, 'hljs-left') // 左对齐 .use(container, 'hljs-center') // 居中 .use(container, 'hljs-right') // 右对齐 .use(deflist) // 定义列表 .use(abbr) // 缩写 .use(footnote) // 脚注 .use(insert) // ++下划线++ .use(mark) // ==标记== .use(miip) // 图片预览 .use(katex) // LaTeX 公式 .use(taskLists) // 任务列表 .use(toc) // 目录 return markdown;

拿到这个对象之后，你可以做两类事情：

1. 查看：了解当前解析器的默认配置、已注册插件；
2. 定制：修改解析选项、追加/移除语法规则，从而影响最终渲染结果。

三种获取 markdown-it 对象的方式

官方文档给出了三种等价途径，各有适用场景。

方法一：全局注册后通过导出对象获取

适用于在入口文件里用Vue.use(MavonEditor)完成全局注册的场景：

import MavonEditor from 'mavon-editor' Vue.use(MavonEditor) // 任意需要的位置 const markdownIt = MavonEditor.mavonEditor.getMarkdownIt()

原理上，src/index.js 导出的VueMavonEditor对象结构如下：

// src/index.js（节选） const VueMavonEditor = { markdownIt: mavonEditor.mixins[0].data().markdownIt, // 已标记 @deprecated mavonEditor: mavonEditor, // Vue 组件定义本身 LeftToolbar: require('./components/md-toolbar-left'), RightToolbar: require('./components/md-toolbar-right'), install: function(Vue) { Vue.component('mavon-editor', mavonEditor); } };

也就是说MavonEditor.mavonEditor就是组件定义，getMarkdownIt()是组件原型上的方法。注意：MavonEditor.markdownIt这个直接暴露的旧属性已被注释为@deprecated（参见 src/index.js），官方推荐统一走mavonEditor.getMarkdownIt()。

方法二：局部引入

只在当前组件使用、未做全局注册时，用具名解构即可：

import { mavonEditor } from 'mavon-editor' const markdownIt = mavonEditor.getMarkdownIt()

这与方法一本质相同——解构出来的mavonEditor就是同一个组件定义对象，只是避免了全局Vue.use()带来的注册副作用。

方法三：通过组件实例（$refs）获取

如果你已经在模板中渲染了编辑器，可以直接通过 ref 拿到实例方法：

<mavonEditor ref="md"></mavonEditor> // ... const markdownIt = this.$refs.md.getMarkdownIt()

这是最贴近组件实例的写法，适合在同一个组件内边编辑边定制解析行为。

三种方法对比

从源码看，getMarkdownIt()的实现位于 src/mavon-editor.vue：

getMarkdownIt() { let mdIt = this.mixins[0].data().markdownIt; if (!mdIt) { mdIt = initMarkdown(); } return mdIt }

它优先返回 mixin 中缓存的实例；若实例尚未创建（例如组件尚未挂载），则调用initMarkdown()现场构建，保证任何时机调用都能拿到可用的解析器。

使用 markdown-it 对象：用 set() 修改解析行为

拿到对象后的核心操作是markdownIt.set(options)。官方文档给出的示例是调整换行风格：

// markdownIt 通过上述任一方式获取 markdownIt.set({ breaks: false });

换行（breaks）选项的实战含义

mavonEditor 在 src/lib/mixins/markdown.js 中给出的默认配置为：

var markdown_config = { html: true, // 允许在源码中使用 HTML 标签 xhtmlOut: true, // 单标签使用 '/' 闭合，如 <br /> breaks: true, // 段落内的 '\n' 转换为 <br> langPrefix: 'lang-', // 围栏代码块的 CSS 前缀 linkify: false, // 是否自动识别裸 URL typographer: true, // 启用排版替换 quotes: '“”‘’' // 引号替换规则 }

注意：mavonEditor 的默认breaks: true与 markdown-it 官方默认（false）不同。默认行为是源码里直接换行就会在渲染结果中产生<br>；而set({ breaks: false })之后，换行遵循标准 Markdown 规则——必须在一行末尾额外敲两个空格才会生成<br>，否则换行会被当作普通空格合并进段落。

这一行为在测试用例 tests/unit/base.spec.js 中有直接佐证：默认配置下渲染含\n的恶意 HTML 测试串时，输出中出现了<br />，证明breaks: true生效。

set() 可修改的常用选项

以上均为 markdown-it 原生set()支持的配置项，可按需覆盖任意一个。

与 props 的联动：html 与 xssOptions

获取到解析器后你可能会疑惑：为什么有些配置改了不生效？因为 mavonEditor 的部分 props 会在组件初始化时强制覆写解析器。看 src/lib/mixins/markdown.js：

created() { this.markdownIt = initMarkdown(); if (!this.html) { this.markdownIt.set({ html: false }); this.xssOptions = false; } else if (typeof this.xssOptions === 'object') { this.markdownIt.use(sanitizer, this.xssOptions); } }

规则如下：

• 当htmlprop 为false时，解析器会被强制set({ html: false })，同时关闭 XSS 过滤。html: false状态下源码中的 HTML 标签会以转义文本形式展示，这是官方文档建议的「彻底杜绝安全问题」的配置（见 README.md）；
• 当html为true（默认）且传入了xssOptions对象时，会注册sanitizer插件（实现见 src/lib/core/sanitizer.js），基于xss库对渲染结果做白名单过滤；
• xssOptions设为false则关闭过滤。

因此，若你用markdownIt.set({ html: true })却看到 HTML 被转义，多半是html/xssOptionsprops 在 created 阶段已经覆写了你的设置。定制时优先通过 props 控制，二次修改才考虑直接操作对象。

进阶：向 markdown-it 注册自定义插件

markdown-it 的插件机制是.use(plugin, options)，mavonEditor 自身已注册了大量语法扩展（详见 package.json 中的markdown-it-*依赖）。拿到对象后，你可以追加自己的插件：

const markdownIt = mavonEditor.getMarkdownIt() // 注册自定义插件（需自行引入对应依赖） markdownIt.use(require('markdown-it-xxx'), { /* 插件选项 */ }) // 修改后再触发一次渲染即可看到效果

一个内建的插件范例是container的三种对齐容器（::: hljs-left/::: hljs-center/::: hljs-right），它们就是在initMarkdown()中以.use(container, name)形式注册的，对应测试见 tests/unit/base.spec.js。README 也明确指出：可通过获取 markdown-it 对象来引入其他语法插件（见 README.md）。注意getMarkdownIt()返回的是组件内部缓存的单例，.use()会直接改变该实例，从而影响当前所有编辑器的渲染。

类型声明与注意事项

在 TypeScript 项目中，mavon-editor.d.ts 将markdownIt声明为any，getMarkdownIt()返回的就是这个markdown-it实例：

interface VueMavonEditor { markdownIt: any; mavonEditor: Component; // ... }

使用时的几个注意点：

1. 优先使用getMarkdownIt()：直接读取mavonEditor.markdownIt已标记 deprecated，且它在组件实例创建前可能为null；
2. 修改后需触发重新渲染：set()/.use()只改变解析规则，已渲染内容不会自动更新，请重新触发输入或调用渲染逻辑（编辑区内容变化会自动走$render，见 src/mavon-editor.vue）；
3. 单例共享：默认情况下所有 mavonEditor 实例共享同一个解析器实例（mixin 数据），对它的修改会全局生效。

小结

mavonEditor 的 markdown 渲染能力完全建立在 markdown-it 之上。通过全局注册对象、局部解构或组件 ref 三种方式都能拿到getMarkdownIt()返回的解析器；拿到后可用set()精细调整换行、HTML、链接识别等解析行为，用.use()扩展自定义语法，同时要留意html/xssOptionsprops 对解析器的覆写逻辑。理解这套获取与定制链路，你就能在保持编辑器开箱即用体验的同时，获得完全可控的 Markdown 解析能力。

• 前端
• UI组件
• 富文本