前言
在 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;
}