前言

在 Vue 里面使用 Markdown 编辑器的选择并不多。mavon-editor 大概是 GitHub 上星星最多的 Vue Markdown 编辑器了，用起来也比较方便。

但是由于 mavon-editor 默认使用 Cloudflare 作为 CDN 来加载一些资源，而 Cloudflare 有些情况下访问起来比较困难，所以关闭 CDN 以进行本地加载成了不少开发者的需求。

当然，mavon-editor 的作者已经在文档中介绍了本地加载的方式，但是实现起来有些问题，这篇文章是对原作的补充。

方式

事实上,当你在使用 npm install mavon-edior 来安装编辑器的时候，所有的资源文件已经被下载到本地（/node_modules/mavon-editor/）了。所以我们只需要将这些本地文件替代掉指向 CDN 的资源就行了。

如果你是按照本文来进行配置，那么请不要按照原作者的方式来修改，所有步骤请在刚刚配置好 mavon-editor 的情况下开始。

以下是具体步骤：

1. 复制本地文件

将 /node_modules/mavon-editor/dist/ 下的文件复制到 /public/md/ 下，这些就是需要本地加载的资源文件。

其中，/public/md/ 就是在 /public/ 目录下新建了个自定义的文件夹，开发者可以自定义修改，但需要与后文的引用路径保持一致。

当然，你也可以按照官方文档那样，通过 CopyWebpackPlugin 来加载，其实现的效果是一样的，但是本文演示的方式更为直观。

2. 编辑配置

在 Vue 下的 data 中，添加一个属性：

externalLink: {
    markdown_css: false,
    hljs_js: () => '/md/highlightjs/highlight.min.js',
    hljs_css: (css) => '/md/highlightjs/styles/' + css + '.min.css',
    hljs_lang: (lang) => '/md/highlightjs/languages/' + lang + '.min.js',
    katex_css: () => '/md/katex/katex.min.css',
    katex_js: () => '/md/katex/katex.min.js',
}

这组配置就是 mavon-editor 的资源加载配置了。注意到 markdown_css 的值为 false，这与原作者文档不同，我们将手动引入所需的 css。

3. 引入 CSS

添加如下代码以引入 CSS：

<style scoped>
@import '/md/markdown/github-markdown.min.css';
</style>

该 CSS 文件定义了编辑器的主题。

在第 3 步中，如果你写成 markdown_css: () => '/md/markdown/github-markdown.min.css', 那么这个 CSS 就不会生效了。

4. 修改标签属性

在 <mavon-editor> 标签上，修改 external-link 属性来使配置生效：

<mavon-editor :external-link="externalLink"></mavon-editor>

根据以上 4 个步骤来修改代码，通过浏览器的开发者工具来看看效果吧！

扩展

在一些前端框架（例如 Vuetify）中，mavon-editor 的代码样式会被污染，或许你需要以下几下几行 CSS 代码来解决：

.hljs,
.markdown-body pre code {
  background: transparent !important;
}