?

 轉載自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 個步驟來修改代碼，通過瀏覽器的開發者工具來看看效果吧！

?