关于vue2对于mavon-editor的基本使用

1. mavon-editor的安装

npm install mavon-editor --save

2. 在main.js中进行全局配置

import mavonEditor from 'mavon-editor'

import 'mavon-editor/dist/css/index.css'

Vue.use(mavonEditor);

3.maven-editor使用

<mavon-editor v-model="content" :ishljs="true" 
@imgAdd="imgAdd"></mavon-editor>

imgAdd：实现图片上传的功能

3.1 imgAdd的函数实现

       imgAdd(pos,$file){
            const formData = new FormData() // 实例表单对象
            formData.append('file',$file) // 将获取的文件对象加入到表单对象中
            axios({
                url:'http://localhost:8080/file/upload',
                method:'POST',
                data:formData,
                headers: {'Content-Type': 'multipart/form-data'},
            }).then(res=>{
                this.$refs.md.$img2Url(pos, res.data) //上传成功后，将编辑器中文件url重新赋值
            })
        },

4. 实现预览效果

<mavon-editor v-model="viewcontent" :subfield="false" :defaultOpen="'preview'" :editable="false"
:toolbarsFlag="false" :ishljs="true">
</mavon-editor>