文章标题

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


    
         
    
            
    

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

你可能感兴趣的:(vue)