elementui 集成富文本编辑器vue-quill-editor

第一步:安装vue-quill-editor

cnpm install vue-quill-editor -S

第二步：VUE项目集成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-dialog title="添加通知" :visible.sync="dialogFormAdd">
      <el-form :model="notice" label-width="100px">
        <el-form-item label="通知标题" >
          <el-input v-model="notice.title" auto-complete="off"></el-input>
        </el-form-item>
        <el-form-item label="通知内容">
         <quill-editor 
            v-model="notice.content" 
            ref="myQuillEditor" 
            :options="editorOption" 
            @blur="onEditorBlur($event)" 
            @focus="onEditorFocus($event)"
            @change="onEditorChange($event)">
         </quill-editor>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormAdd = false">取 消</el-button>
        <el-button type="primary" @click="add(notice)">确 定</el-button>
      </div>
    </el-dialog>

数据和方法相关定义:

data:

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

method:

 // 富文本编辑方法
         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('图片插入失败')
        }

第三步：VUE项目集成vue-quill-editor效果展示