文章标题

我们通常都会使用富文本编辑器在后台编辑内容，开发vue当然也少不了，我们通过vue官网的链接可以找到一些资源，或者去github上查找一些开源的编辑器。
我使用的是vue-quill-editor，它的界面很简洁，功能也满足平时的编辑需要，不过于臃肿，但是它默认的图片上传是使用Data URL方式保存到了内容里，这不是我想要的，我相信大部分人也不想这样去保存图片，还好quill提供了如何去自定义按钮事件的demo(03-example.vue)，那么我们就可以自己去实现图片的保存方式了。
这里我用的是iview 的上传组件，上传成功后获得图片的地址，在编辑器中显示
先下载vue-quill-editor 然后下面是主要代码

    <quill-editor  ref="myQuillEditor"        @change="onEditorChange($event)">    </quill-editor>         <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></div>

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 100M.'
                });
                console.log('File  ' + file.name + ' is too large, no more than 100M.');
            },

            onEditorChange({editor,html,text}) {
                this.emit('quilCon',html) } } };

.info {
border-radius: 10px;
line-height: 20px;
padding: 10px;
margin: 10px;
background-color: #ffffff;
}

.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);}