转载自
时间 2022-03-31 21:07:09
前言
在 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/就是在/src/目录下新建了个自定义的文件夹，开发者可以自定义修改，但需要与后文的引用路径保持一致。
2. 编辑配置
在 Vue 下的 data 中，添加一个属性：
externalLink: {
markdown_css: () => '/md/github-markdown.min.css',
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。
4. 修改标签属性
在 <mavon-editor> 标签上，修改 external-link 属性来使配置生效：
<mavon-editor :external-link="externalLink"></mavon-editor>
根据以上 4 个步骤来修改代码，通过浏览器的开发者工具来看看效果吧！