This is the 8th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Mavon-editor is an excellent open source rich text editor for pages, used in many VUE projects.

This article is also a record of the final solution to the problem of resource loading (because it is an Intranet project) in the process of using Mavon-Editor, and also provides more choices for those who have the same problem.

First, this problem occurred in v2.4.2 and later, because the package size of the plug-in was optimized, so the following dependent files were not included in the plug-in by default:

  • highlight.js(Code highlighted)
  • github-markdown-css(Popular Markdown style)
  • katex(V2.4.7) (Markdown syntax Extension)

When we used Mavon-Editor in our project, these three resources were imported from the CDN by default, which led to weird problems in many Intranet projects, such as code not being highlighted, selected styles not working, etc.

In view of this problem, the official also gave the corresponding solution, click to view

Basically add some externalLink manually, interested partners have a look at it, I don’t need to repeat.

After my tests, I found several problems

The first question is: the official offer solution cannot introduce highlightjs/styles/lot. Min. CSS, so lead to a snippet of markdown cannot add the highlighted style.

The code is not highlighted and looks bad, so we can simply use the @import URL () method of CSS to introduce the missing CSS file.

The second problem is that the official said that we need to install the copy-webpack-plugin and add some configurations to the webpack configuration file, as follows:

module.exports = { plugins: [ new CopyWebpackPlugin([{ from: 'node_modules/mavon-editor/dist/highlightjs', to: Path.resolve (__dirname, '../dist/highlightjs'), // the plugin will export the file under /dist/highlightjs}, {from: 'node_modules/mavon-editor/dist/markdown', to: Path.resolve (__dirname, '../dist/markdown'), // the plugin will export the file under /dist/markdown}, {from: 'node_modules/mavon-editor/dist/katex', // the plugin will export the file to: path.resolve(__dirname, '../dist/katex')}],],}Copy the code

The goal is to extract the three dependency files and place them in the dist directory generated after the vue project is packaged.

This was a hassle because most of the projects were vue-cli generated, adding webPack configurations was cumbersome to me, and having to reextract dependent files each time I packaged was a pain in the face.

Is there any way to take a short cut? Of course

The /public directory is stored in the /dist directory of the vue-CLI, so we can copy the code directly from the source of the browser to the /public directory of the project, and then use the absolute address

Let’s see if this idea works.

So my directory structure under public looks like this

Public ├ ─ ─ index. The HTML ├ ─ ─ the CDN - lib ├ ─ ─ highlight ├ ─ ─ highlight. Min. Js ├ ─ ─ styles ├ ─ ─ making. Min. CSS ├ ─ ─ markdownCss ├ ─ ─ Lot. Markdown. CSS ├ ─ ─ making the markdown. Min. CSS ├ ─ ─ KaTex ├ ─ ─ KaTex. Min. Js ├ ─ ─ KaTex. Min. CSSCopy the code

And then we run NPM run build on the console and when we’re done we see that the same directory will be generated under dist because at deployment time dist was the root directory of the front end project, the directory where the index.html was so we can just use the absolute path that starts with \ in our code

The following code

<template>
    <mavon-editor
     :value="value"
     :subfield="false"
     :defaultOpen="'preview'"
     :ishljs="true"
     :externalLink="externalLink"
    />
</template>
export default {
	data(){
		return {
		value: 'A piece of Markdown text',
		externalLink = {
      		markdown_css: function() {
        		// This is the markdown CSS file path
        		return '/cdn-lib/markdownCss/github-markdown.min.css'
      		},
	      	hljs_js: function() {
	        	// This is the HLJS file path
	        	return '/cdn-lib/highlight/highlight.min.js'
	      	},
	      	katex_css: function() {
	        	// This is the katex color scheme path path
	        	return '/cdn-lib/KaTex/katex.min.css'
	      	},
	      	katex_js: function() {
	        	// This is the katex.js path
	        	return '/cdn-lib/KaTex/katex.min.js'
	      	}
    	}}
	}
}
<style>
// Introduce the missing CSS here
@import url(/cdn-lib/highlight/styles/github.min.css);
</style>
Copy the code

Of course, this is not a way of the way, but it is a physical work, hands on the line, do not have to think

After writing a test, HMM ~ off work, a day’s pay to hand 🙂