preface

There aren’t many options for using the Markdown editor in Vue. Mavon-editor is probably the most star-studded Vue Markdown editor on GitHub, and is relatively easy to use.

However, since Mavon-Editor uses Cloudflare as a CDN by default to load some resources, and Cloudflare can be difficult to access in some cases, it has become a requirement of many developers to turn off CDN for local loading.

Of course, the authors of Mavon-Editor have documented how to do local loading, but there are some problems with implementation, and this article complements the original.

way

In fact, when you install the editor using NPM install mavon-edior, all the resource files are already downloaded locally (/node_modules/mavon-editor/). So we just need to replace these local files with resources pointing to the CDN.

If you are doing the configuration as described in this article, don’t do it the way the author did, and start with the mavon-Editor just configured.

Here are the steps:

1. Copy local files

Copy the files in /node_modules/mavon-editor/dist/ to /public/md/. These are the resource files that need to be loaded locally.

/public/md/ creates a custom folder in the /public/ directory. Developers can customize the changes, but the reference path should be the same as the following.

Of course, you can also use the CopyWebpackPlugin as the official document does, and the effect is the same, but this method is more intuitive.

2. Edit the configuration

In data under Vue, add an attribute:

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',}Copy the code

This set of configurations is the resource loading configuration for mavon-Editor. Note that markdown_CSS has a value of false, unlike the original author document, and we will manually import the required CSS.

3. The introduction of CSS

Add the following code to introduce CSS:

<style scoped>
@import '/md/markdown/github-markdown.min.css';
</style>
Copy the code

This CSS file defines the theme of the editor.

In step 3, if you write markdown_css: () => ‘/md/markdown/github-markdown.min.css’, the CSS will not work.

4. Modify label attributes

On the

TAB, modify the external-link property to make the configuration take effect:

<mavon-editor :external-link="externalLink"></mavon-editor>
Copy the code

Follow the above four steps to modify the code, and use your browser’s developer tools to see the results!

extension

In some front-end frameworks (such as Vuetify), the mavon-Editor code style can be corrupted, and you may need the following lines of CSS to fix it:

.hljs..markdown-body pre code {
  background: transparent ! important;
}
Copy the code