Vue 中使用富文本编辑器 vue-quill-editor 与自定义上传图片及显示HTML源码

# 前言

富文本编辑器有许多，列如 UEditor、Simditor、wangEditor、CKEditor、TinyMCE、Froala、Quill 等各种各样的。
我们今天主要介绍下 vue-quill-editor 以及如何自定义上传图片。

安装

npm install vue-quill-editor -S
npm install quill -S

引入

main.js 全局引入

import Vue from  vue 
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)

=============================================

单个页面引入

import { quillEditor } from "vue-quill-editor"; //调用编辑器
import  quill/dist/quill.core.css ;
import  quill/dist/quill.snow.css ;
import  quill/dist/quill.bubble.css ;

export default{
    components: { quillEditor },
}

配置

配置功能按钮

html 
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption" style="height: 200px" />

js
editorOption: {
    placeholder: "请在这里输入",
    modules: {
        toolbar: {
            container: [
                [ bold ,  italic ,  underline ,  strike ],    //加粗，斜体，下划线，删除线
                [ blockquote ,  code-block ],     //引用，代码块
                [{  header : 1 }, {  header : 2 }],        // 标题，键值对的形式；1、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] }],     //几级标题
                [{  color : [] }, {  background : [] }],     // 字体颜色，字体背景颜色
                [{  font : [] }],     //字体
                [{  align : [] }],    //对齐方式
                [ clean ],    //清除字体样式
                [ image ]    //上传图片、上传视频   video 
            ]
        }
    }
}

可根据项目需要自行删减

效果图如下

新增显示Html源码功能

1. 创建 quill.eeSourceBtn.js 内容如下

class eeSourceBtn {
    constructor(quill, options) {
        let theClass = this;
        theClass.addDom(quill);
        quill.on( text-change , (delta, oldDelta, source) => {
            theClass.replaceSourceEditorContent(quill)
        })

        //create btn
        let button = document.createElement("button");
        //display button text
        button.innerHTML = "html";
        button.onclick = function() {
            theClass.showSourceEditor(quill);
        };

        //create btn container
        let buttonContainer = document.createElement("span");
        buttonContainer.setAttribute("class", "ql-formats ee-flag-source");
        buttonContainer.appendChild(button);
        //add to toolbar
        quill.container.previousSibling.appendChild(buttonContainer);
    }
    //add dom for source editor
    addDom(quill) {
        if (!quill.container.querySelector(".ql-ee-source")) {
            var txtArea = document.createElement( textarea );
            txtArea.style.cssText = "width: 100%;margin: 0px;background: rgb(249, 249, 249);box-sizing: none;font-size: 13px;outline: none;padding: 12px 15px;line-height: 1.42;font-family: Consolas, Menlo, Monaco, "Courier New", monospace;position: absolute;top: 0;bottom: 0;border: none;"

            var htmlEditor = quill.addContainer( ql-ee-source )
            htmlEditor.style.cssText = "display:none";
            htmlEditor.appendChild(txtArea)
        }
    }

    //for quill editor switch
    replaceSourceEditorContent(quill) {
        let quillEditor = quill.container.querySelector(".ql-editor");
        let sourceContainer = quill.container.querySelector(".ql-ee-source");
        let sourceEditor = sourceContainer.querySelector( textarea );
        sourceEditor.value = quillEditor.innerHTML;
    }

    //add html DOM, show/hide, save event
    showSourceEditor(quill) {
        //1. find quill editor
        let quillEditor = quill.container.querySelector(".ql-editor");
        let sourceContainer = quill.container.querySelector(".ql-ee-source");
        let sourceEditor = sourceContainer.querySelector( textarea );
        //show/hide editor, value transfer
        if (sourceContainer.style.display ===  none ) {
            //show source editor
            sourceContainer.style.display =   ;
            sourceEditor.value = quillEditor.innerHTML;
        } else {
            //hidden source ditor
            sourceContainer.style.display =  none ;
            //set source content to quill editor
            quillEditor.innerHTML = sourceEditor.value;
        }
    }
}

window.eeSourceBtn = eeSourceBtn;
export default eeSourceBtn;
export { eeSourceBtn };

2. 页面引入

import { Quill } from "vue-quill-editor"; 
import { eeSourceBtn } from  ../quill.eeSourceBtn.js ;
// 注册我们写的事件
Quill.register(  modules/eeSourceBtn , eeSourceBtn );

3. 在配置项里加入我们的新增的事件

editorOption: {
    placeholder: "请在这里输入",
    modules: {
        eeSourceBtn: eeSourceBtn,  // 引入我我们新增的事件
        toolbar: {
              container: [...这里是我们之前配置的功能按钮项]
        } 
    }
}

效果图如下

多了显示Html源码的标识

自定义上传图片

问：为什么要自定义上传图片呢？
答：默认是base64格式图片，可自定义上传至文件服务器或OSS等。

这里依赖element-ui的上传插件，所以我们得配置一下

安装
npm install element-ui -S

main.js 引入
import Element from "element-ui";
import "element-ui/lib/theme-chalk/index.css";
Vue.use(Element);

开始写自定义上传图片

// html
<quill-editor v-model="content" ref="myQuillEditor" :options="editorOption"  style="height: 200px" />
<!-- 用于配合编辑器自定义上传图片 -->
<el-upload class="QuillEditor-uploader" action :before-upload="QuillEditorUpload" v-show="0" />

// js
editorOption: {
    placeholder: "请在这里输入",
    modules: {
        eeSourceBtn: eeSourceBtn,
        toolbar: {
            container: [...这里是我们之前配置的功能按钮项],
            // 自定义上传图片
            handlers: {
                 image : function ( value ) {
                    if ( value ) {
                        // 触发上传插件
                        document.querySelector( .QuillEditor-uploader .el-upload__input ).click()
                    } else {
                        this.quill.format(  image , false );
                    }
                }
            }
        }
    }
}

// 调用接口上传
QuillEditorUpload(){
    let fd = new FormData();
    fd.append(  file , f ) 
    upload( fd ).then( res => {
    if ( res.isSuccess ){
        // 获取富文本组件实例
        let quill = this.$refs.myQuillEditor.quill
        // 获取光标所在位置
        let length = quill.getSelection().index;
        // 插入图片，res.resultMsg 为服务器返回的图片链接地址
        quill.insertEmbed(length,  image , res.resultMsg)
        // 调整光标到最后
        quill.setSelection(length + 1)
     }
    } )
}

其他方法

编辑器还提供了其他方法供大家使用：

@blur="onEditorBlur($event)" 
@focus="onEditorFocus($event)" 
@change="onEditorChange($event)"