nuxt整合mavon-editor（markdown富⽂本编辑器）
1、npm i -S mavon-editor
2、plugins新建mavon-editor.js
import Vue from'vue'
import mavonEditor from'mavon-editor'
Vue.use(mavonEditor)
3、配置fig.js
css: [
html富文本框'mavon-editor/dist/css/index.css'
],
plugins: [
{src: '@/plugins/mavon-editor.js', mode: 'client'},
],
4、使⽤
<template>
<div>
<!--
:autofocus="false"：不⾃动获取焦点
@change="getMdHtml"：内容改变事件
@imgAdd="uploadContentImg"：操作栏上传⽂件事件
@imgDel="delConentImg"：操作栏删除⽂件事件
-->
<mavon-editor :autofocus="false"ref="md" v-model="mdContent" @change="getMdHtml"
@imgAdd="uploadContentImg" @imgDel="delConentImg"/>
</div>
</template>
<script>
export default {
data() {
return {
mdContent: "",
htmlContent: ""
}
},
methods: {
getMdHtml(mdContent, htmlContent) {//参数1：md语法内容，参数2：html语法内容
this.htmlContent = htmlContent
},
uploadContentImg(pos, file) {
const fd = new FormData()
fd.append('file', file)
this.$uploadImg(fd).then(response => {//上传图⽚接⼝
if (de === 20000) {
this.$refs.md.$img2Url(pos, response.data)//图⽚索引替换为url
}
})
},
delConentImg(urlAndFileArr) {
const fileUrl = urlAndFileArr[0]
const file = urlAndFileArr[1]
this.$deleteImg(fileUrl)//删除图⽚接⼝
}
}
}
</script>
<style scoped>
</style>