vue 中使用 mavon-editor 遇到的问题

一、编辑

• 首先我们先安装 包

  npm install mavon-editor
  # or
  yarn add mavon-editor
  

• 在 需要用于编译 文档 的组件中 执行引用注册

<template>
	<mavon-editor  ref="md"  v-model="content" style="height: 80%;width:100%;"/>
</template>

<script>
// 引入包、样式
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
	name:'page',
	data(){
		return{
			content:''
		}
	},
	components:{ mavonEditor },
}
</script>

• 这里引入就可以在 页面上 看见如下效果
  

• 但是你会发现 为什么代码部分没有高亮、 浏览器控制台为什么有报错
  
  为什么会出现这种状况？是因为它是使用 CDN 加载样式的，并且这里加载失败了

二、解决代码显示高亮和样式问题

那么我们如何关闭 cdn 加载，实现本地加载呢？
查找了很多资料最后在 掘金 上找到了 解决办法

总结就是很简单

1. 在 node_modules 文件夹下找到 安装的 mavon-editor下的 dist 目录 复制下面的所有文件，拷贝到你的本地目录里，这里我放的是 public/mavonEditor/ 下面
2. 在组件中添加 :externalLink="externalLink"

<template>
	<mavon-editor  ref="md"  v-model="content"  :externalLink="externalLink"  style="height: 80%;width:100%;" />
</template>

<script>
import { mavonEditor } from "mavon-editor";
import "mavon-editor/dist/css/index.css";
export default {
	name: "HelloWorld",
	components: {
	  mavonEditor,
	},
	data(){
		content:'',
		externalLink:{
			markdown_css:false,
			hljs_js:()=>{
				// 这是你的hljs文件路径
				return '/mavonEditor/highlightjs/highlight.min.js'
			},
			hljs_css:(css)=>{
				// 这是你的代码高亮配色文件路径
          		return `/mavonEditor/highlightjs/styles/${css}.min.css`
			},
			hljs_lang: (lang) => {
	          // 这是你的代码高亮语言解析路径
	          return `/mavonEditor/highlightjs/languages/${lang}.min.js`
        	},
        	katex_css:()=>{
        		// 这是你的katex配色方案路径路径
          		return '/mavonEditor/katex/katex.min.css'
        	},
        	katex_js: ()=>{
        		// 这是你的katex.js路径
          		return '/mavonEditor/katex/katex.min.js'
        	}
		}
	}
}
</script>

<style scoped>
@import '/mavonEditor/markdown/github-markdown.min.css';
</style>

3. 为什么要上面这样写 解决方法 说的很清楚

---

参考地址：

• https://juejin.cn/post/6951281119819989006

备注： 本文只是自己在实际开发中 遇到问题 解决之后 做的笔记，如有冒犯请及时联系，如有错欢迎指出