Element UI 整合富文字編輯器 vue-quill-editor

13sai發表於2020-01-12
UIVue

後臺編輯文章經常用到編輯器，這裡選用github上star相對比較多的vue-quill-editor，直接上程式碼：

main.js

// 引入
import VueQuillEditor from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

Vue.use(VueQuillEditor)

template:

...

<el-form-item label="詳情" prop="content">
    <quill-editor 
        v-model="form.remark" 
        ref="myQuillEditor" 
        :options="editorOption" 
        @blur="onEditorBlur($event)" @focus="onEditorFocus($event)"
        @change="onEditorChange($event)">
    </quill-editor>
</el-form-item>
// 用於替換編輯器base64上傳
<div style="display:none;">
    <el-upload class="edit-uploader" :action="uploadPicUrl"
        :show-file-list="false"
        :headers="header"
        :on-success="editorUploadSuccess"
        :on-error="editorUploadError"
        :before-upload="beforeEditorUpload" >
            <i class="el-icon-plus avatar-uploader-icon" ref="aUpload"></i>
    </el-upload>
</div>

...   

<script>

export default {
    data() {
        return {
            editorOption: {
                modules: {
                    toolbar: {container:[
                    ['bold', 'italic', 'underline', 'strike'],
                    ['blockquote', 'code-block'],
                    [{ 'header': 1 }, { 'header': 2 }],
                    [{ 'list': 'ordered' }, { 'list': 'bullet' }],
                    [{ 'script': 'sub' }, { 'script': 'super' }],
                    [{ 'indent': '-1' }, { 'indent': '+1' }],
                    [{ 'direction': 'rtl' }],
                    [{ 'size': ['small', false, 'large', 'huge'] }],
                    [{ 'header': [1, 2, 3, 4, 5, 6, false] }],
                    [{ 'font': [] }],
                    [{ 'color': [] }, { 'background': [] }],
                    [{ 'align': [] }],
                    ['clean'],
                    ['link', 'image']
                    ],
                    handlers: {
                        'image': function(value) {
                            if (value) {
                                document.querySelector('.edit-uploader input').click()
                            } else {
                                this.quill.format('image', false);
                            }
                            // this.$refs.aUpload.click() //自定義圖片上傳回撥
                        }
                    }
                    },
                    syntax: {
                        highlight: text => hljs.highlightAuto(text).value
                    }
                },

            }
        }
    },
    methods: {
        onEditorReady(editor) { // 準備編輯器
        },
        onEditorBlur(){}, // 失去焦點事件
        onEditorFocus(){}, // 獲得焦點事件
        onEditorChange(){}, // 內容改變事件
        beforeEditorUpload() {
            // 顯示loading動畫
            this.quillUpdateImg = true
        },

        editorUploadSuccess(res, file) {
            // 獲取富文字元件例項
            let quill = this.$refs.myQuillEditor.quill
            // 如果上傳成功
            if (res.code === 0) {
                // 獲取游標所在位置
                let length = quill.getSelection().index;
                // 插入圖片  res.info為伺服器返回的圖片地址
                quill.insertEmbed(length, 'image', res.data.filepath)
                // 調整游標到最後
                quill.setSelection(length + 1)
            } else {
                this.$message.error('圖片插入失敗')
            }
            // loading動畫消失
            this.quillUpdateImg = false
        },

        // 富文字圖片上傳失敗
        editorUploadError() {
            // loading動畫消失
            this.quillUpdateImg = false
            this.$message.error('圖片插入失敗')
        }
    }
}
</script>

這裡需要注意的是，編輯器預設使用base64上傳，我們使用elementui的上傳元件替換掉原來的圖片上傳。

本作品採用《CC 協議》，轉載必須註明作者和本文連結

分享開發知識，歡迎交流。qq957042781

相關文章