Vue 中使用富文本编辑器 vue-quill-editor 与

# 前言

富文本编辑器有很多，比如 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'
            ]
        }
    }
}

可根据项目需要自行删减

效果图如下

image.png

新增显示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: [...这里是我们之前配置的功能按钮项]
        } 
    }
}

效果图如下

1640763608(1).png
多了显示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)"