Vue mavon-editor 本地加载 – 关闭 CDN

吐槽君 分类:javascript

前言

在 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;
}
 
一线大厂高级前端编写,前端初中阶面试题,帮助初学者应聘,需要联系微信:javadudu

回复

我来回复
  • 暂无回复内容