开始配置
v-md-editor 官方文档地址:https://code-farmer-i.github.io/vue-markdown-editor/zh/
1、npm 安装插件
npm i @kangc/v-md-editor -S
2、main.js 全局引入插件
/* v-md-editor 编辑器 start */
/* 1、v-md-editor 基础引用 */
import VueMarkdownEditor from '@kangc/v-md-editor';
import '@kangc/v-md-editor/lib/style/base-editor.css';
import vuepressTheme from '@kangc/v-md-editor/lib/theme/vuepress.js';
import '@kangc/v-md-editor/lib/theme/style/vuepress.css';
import Prism from 'prismjs';
VueMarkdownEditor.use(vuepressTheme, {
Prism,
});
/* 2、v-md-editor 代码块关键字高亮 */
import githubTheme from '@kangc/v-md-editor/lib/theme/github.js';
import '@kangc/v-md-editor/lib/theme/style/github.css';
// 引入所有语言包
import hljs from 'highlight.js';
VueMarkdownEditor.use(githubTheme, {
Hljs: hljs,
});
Vue.use(VueMarkdownEditor);
/* 3、v-md-editor 二次封装 */
import mdEditor from '@/components/v-md-editor/index';
Vue.component('MdEditor', mdEditor);
/* v-md-editor 编辑器 end */
3、二次封装插件
1、二次封装
2、main.js 全局引入( 第二部已加入)
在 components 目录下创建 v-md-editor 文件夹并创建文件 index.vue
index.vue 代码如下
<!--
详见: https://blog.csdn.net/qq_41463655/article/details/125340036
-->
<template>
<div>
<v-md-editor v-model="editorValue"
:disabled-menus="[]"
@upload-image="handleUploadImage"
height="400px"></v-md-editor>
</div>
</template>
<script>
export default {
name: 'mdEditor',
data() {
return {
editorValue: this.content != null ? this.content : "",
}
},
props: {
// 接收值父组件传递值
content: String
},
created() {
console.log("--------加载md编辑器")
},
methods: {
// v-md-editor 文件上传
handleUploadImage(event, insertImage, files) {
// console.log(files);
// 上传
for (let i = 0; i < files.length; i++) {
this.crud.upload(files[i], "image/vMdEditor/").then(res => {
// 获取返回数据
let data = res.data.data;
// 添加图片到内容
insertImage({
url: data.url,
desc: data.name
});
});
}
},
},
watch: {
editorValue: function (newNum, oldNum) {
// 修改调用者传入的值
this.$emit('update:content', newNum)
}
},
}
</script>
<style>
</style>
4、使用
在任意地方使用
<MdEditor :content.sync="obj.content"></MdEditor>
效果如下,图片上传支持 cv, qq,wx截屏上传
5、关于编辑无法回显
初始化 MdEditor 编辑器过早, 可能导致数据无法正常回显
通过 v-if 控制 MdEditor 加载时间 (如下:在调用接口获取数据完成之后修改 initSuccess = true)
<MdEditor v-if="initSuccess" :content.sync="obj.textThree"/>
结尾
-
个人开源项目(快速开发项目利器- 通用后台管理系统 )–> https://gitee.com/wslxm/spring-boot-plus2 , 喜欢的可以看看
-
关注公众号【兮家】,不定时分享干货内容哦*
-
本文到此结束,如果觉得有用,动动小手点赞或关注一下呗,将不定时持续更新更多的内容…,感谢大家的观看!