​

 转载自Vue mavon-editor 本地加载 – 关闭 CDN - 前端教程。仅自用。

时间 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 个步骤来修改代码，通过浏览器的开发者工具来看看效果吧！