【6】富文本編輯vue-quill-editor自定義圖片上傳、 token 驗證

須要在一個vue-iview項目中引入一個輕量級富文本，而且結合iview的upload鉤子函數實現自定義圖片上傳token驗證

• 思路：

將圖片先上傳至服務器，再將圖片連接插入到富文本中
圖片上傳的話能夠使用element或者iview，這裏我以iview舉例
圖片上傳區域要隱藏，自定義vue-quill-editor的圖片上傳，點擊圖片上傳時調用iview或者element的圖片上傳，
上傳成功後在富文本編輯器中顯示圖片複製代碼

• 安裝

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'複製代碼

• 自定義vue-quill-editor圖片上傳

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>複製代碼

• 調用element或iview圖片上傳組件

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
        // 若是token驗證成功，則上傳成功
        if (res) {
            // 獲取光標所在位置
            let length = quill.getSelection().index;
            // 插入圖片，res爲服務器返回的圖片連接地址
            quill.insertEmbed(length, 'image', res)
            // 調整光標到最後
            quill.setSelection(length + 1)
        } else {
            // 提示信息，需引入Message
            Message.error('圖片插入失敗')
        }
    },
} 複製代碼