Vue development - Rich text editor vue-quill-editor custom image upload

upload picture

It is to a rich text editor and a picture upload function, since vue-quill-editor is base64 encoded into the picture, so when the picture is relatively large, the time of filing the background parameter is too long, leading to submission failed.

Solutions
pictures to upload to the server, and then the image link is inserted into a rich text in
image upload, then you can use the element or iview, here I am with iview example
image upload area you want to hide, custom vue-quill-editor of image upload, click picture upload call iview element or image upload, after a successful upload pictures displayed in rich text editor

1 mounted vue-quill-editor

npm install vue-quill-editor --save

main.js

import VueQuillEditor from 'vue-quill-editor'
Vue.use(VueQuillEditor);
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'

A custom vue-quill-editor picture upload
html:

<quill-editor
    v-model="content"
    :options="editorOption"
    ref="QuillEditor">
</quill-editor>

js:

<script>
    // 工具栏配置
    const toolbarOptions = [
      ['bold', 'italic', 'underline', 'strike'],        // toggled buttons
      ['blockquote', 'code-block'],
    
      [{'header': 1}, {'header': 2}],               // custom button values
      [{'list': 'ordered'}, {'list': 'bullet'}],
      [{'script': 'sub'}, {'script': 'super'}],      // superscript/subscript
      [{'indent': '-1'}, {'indent': '+1'}],          // outdent/indent
      [{'direction': 'rtl'}],                         // text direction
    
      [{'size': ['small', false, 'large', 'huge']}],  // custom dropdown
      [{'header': [1, 2, 3, 4, 5, 6, false]}],
    
      [{'color': []}, {'background': []}],          // dropdown with defaults from theme
      [{'font': []}],
      [{'align': []}],
      ['link', 'image', 'video'],
      ['clean']                                         // remove formatting button
    ]
    
    export default {
        data () {
            return {
                content: '',
                editorOption: {                
                    modules: {
                        toolbar: {
                            container: toolbarOptions,  // 工具栏
                            handlers: {
                                'image': function (value) {
                                    if (value) {
                                        alert('自定义图片')
                                    } else {
                                        this.quill.format('image', false);
                                    }
                                }
                            }
                        }
                    }
                }
            }
        }
    }    
</script>

Second, call the element or component iview image upload
html:

<Upload
    :show-upload-list="false"
    :on-success="handleSuccess"
    :format="['jpg','jpeg','png','gif']"
    :max-size="2048"
    multiple
    action="/file/upload"
    >
    <Button icon="ios-cloud-upload-outline" ></Button>
</Upload>
<quill-editor
    v-model="content"
    :options="editorOption"
    ref="QuillEditor">
</quill-editor>

css:

.ivu-upload {
    display: none;
}

js:

data () {
    return {
        content: '',
        editorOption: {                
	        modules: {
	          toolbar: {
	             container: toolbarOptions,  // 工具栏
	             handlers: {
	                'image': function (value) {
	                   if (value) {
	                       // 调用iview图片上传
	                       document.querySelector('.ivu-upload .ivu-btn').click()
	                   } else {
	                       this.quill.format('image', false);
	                   }
	                }
	             }
	          }
	       }
       }
    }
},
methods: {
    handleSuccess (res) {
        // 获取富文本组件实例
        let quill = this.$refs.QuillEditor.quill
        // 如果上传成功
        if (res) {
            // 获取光标所在位置
            let length = quill.getSelection().index;
            // 插入图片，res为服务器返回的图片链接地址
            quill.insertEmbed(length, 'image', res)
            // 调整光标到最后
            quill.setSelection(length + 1)
        } else {
            // 提示信息，需引入Message
            Message.error('图片插入失败')
        }
    },
} 

Third, if the need for multiple rich text editor
may be more than a place to be used, for example, there are added after the completion of editing functions, then a copy of the file upload and rich text editing: rich text with two different ref mark, in call each respective configuration file upload; upload the file successfully use a different method name, which calls their rich text editor.

Focus: rich text and file upload no matter what way the class name or distinction, these two places before and should be distinguished.

Reprinted from: https://www.jianshu.com/p/9e4e4d955d0f