我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。

我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默认的图片上传是使用Data URL方式保存到了内容里，这不是我想要的，我相信大部分人也不想这样去保存图片，还好quill提供了如何去自定义按钮事件的demo(03-example.vue)，那么我们就可以自己去实现图片的保存方式了。

这里我用的是iview 的上传组件，上传成功后获得图片的地址，在编辑器中显示

先下载vue-quill-editor 然后下面是主要代码

<template>
<div>


<quill-editor  ref="myQuillEditor"
    @change="onEditorChange($event)">
</quill-editor>


<div style="height:65px;border: 1px snow thick;">
<div class="demo-upload-list" v-for="item in uploadList">
<template v-if="item.status === 'finished'">
<img :src="'http://'+item.response.data.picName">
<div class="demo-upload-list-cover">
<Icon type="ios-eye-outline" @click.native="handleView(item.response.data.picName)"></Icon>
<Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
</div>
</template>
<template v-else>
<Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
</template>
</div>
</div>
<Upload :show-upload-list="false"
style="display: none;"
ref="up"
name="upfile"
:format="accept"
:max-size="maxsize"
multiple type="drag"
:on-exceeded-size="handleMaxSize"
:on-success="handleSuccess"
:action="imgUrl" >
<input :id="refid" />
</Upload>
<Modal title="查看图片" v-model="visible">
<img :src="src" v-if="visible" style="width: 60%">
</Modal>
</div>
</template>


<script>
import { quillEditor } from 'vue-quill-editor'
import $ from 'jquery'
export default {
name:'quill',
components: {
quillEditor
},
data() {
return {
visible: false,
src: '',
uploadList: []
}
},
props:{
imgUrl:{
type:String,
},
accept:{
type:Array
},
maxsize:{
type:Number
},
refid:{
type:String
}
},
computed: {
editor() {
return this.$refs.myQuillEditor.quill
},
},
mounted() {

this.uploadList = this.$refs.up.fileList;
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('image', this.imgClick)
this.$refs.myQuillEditor.quill.getModule('toolbar').addHandler('video', this.imgClick)
},


methods: {
//点击图片触发事件
imgClick() {
var up=this.refid;
console.log("up===",up)
$('#'+this.refid).click()
},
//查看图片
handleView(name) {
this.src = 'http://' + name;
this.visible = true;


},
//删除图片
handleRemove(file) {
// 从 upload 实例删除数据
const fileList = this.$refs.up.fileList;
this.$refs.up.fileList.splice(fileList.indexOf(file), 1);
},
//成功回调
handleSuccess(response, file, fileList) {
console.log("返回图片")
if(response.code == 500) {
this.$Message.error('上传失败!')
} else {
this.$Message.success('上传成功!')
//把图片插入指定的位置
this.editor.insertEmbed(this.editor.getSelection().index, 'image', 'http://'+response.data.picName);
}
console.log(response)
console.log(fileList)
console.log(file)
},
//文件太大，错误提示
  handleMaxSize (file) {
                this.$Notice.warning({
                    title: 'Exceeding file size limit',
                    desc: 'File  ' + file.name + ' is too large, no more than 2M.'
                });
                console.log('File  ' + file.name + ' is too large, no more than 2M.');
            },


onEditorChange({editor,html,text}) {
console.log('editor change!', editor)


this.$emit('quilCon',html)
}
}
};
</script>
<style>
.info {
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}
</style>


<style scoped>
.demo-upload-list {
display: inline-block;
width: 60px;
height: 60px;
text-align: center;
line-height: 60px;
border: 1px solid transparent;
border-radius: 4px;
overflow: hidden;
background: #fff;
position: relative;
box-shadow: 0 1px 1px rgba(0, 0, 0, .2);
margin-right: 4px;
}


.demo-upload-list img {
width: 100%;
height: 100%;
}


.demo-upload-list:hover .demo-upload-list-cover {
display: block;
}


.demo-upload-list-cover {
color: #fff;
font-size: 16px;
display: none;
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(0, 0, 0, .6);
}




</style>