vue中使用quill富文本编辑器及其拓展插件

一、安装 quill 及其插件

npm install quill quill-image-drop-module quill-image-resize-module -S

二、在页面中使用 quill 及其插件：quill-image-drop-module、quill-image-resize-module

//myQuill.vue

<div id="quillEditor"></div>


---------------------------------------------------------------------------------------------------------------------------------



//myQuill.js

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import * as Quill from 'quill'  //引入编辑器


//quill图片可拖拽上传,可复制粘贴
import { ImageDrop } from 'quill-image-drop-module';
Quill.register('modules/imageDrop', ImageDrop);

//quill图片可拖拽改变大小
import ImageResize from 'quill-image-resize-module';
Quill.register('modules/imageResize', ImageResize);


//为quill添加字体（需要增加一个对应的font.css文件，并在项目的main.js文件中引入进而生效）
var fonts = ['SimSun', 'SimHei', 'Microsoft-YaHei', 'KaiTi', 'FangSong', 'Arial', 'Times-New-Roman', 'sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单 
Quill.register(Font, true);

export default {
    data(){
        return {
            quillObj:null,
            quillOption:{
                modules: {
                    imageDrop: true,
                    imageResize: {
                        displayStyles: {
                            backgroundColor: 'black',
                            border: 'none',
                            color: 'white'
                        },
                        modules: ['Resize', 'DisplaySize', 'Toolbar']
                    },
                    toolbar: [
                        ['bold', 'italic', 'underline', 'strike'],          //加粗，斜体，下划线，删除线
                        [{ 'size': ['small', false, 'large', 'huge'] }],    // 字体大小
                        [{ 'header': [1, 2, 3, 4, 5, 6, false] }],          //几级标题
                        [{ 'color': [] }, { 'background': [] }],            // 字体颜色，字体背景颜色
                        [{ 'font': fonts }], //引入上方的自定义字体
                        [{ 'align': [] }],                                  //对齐方式
                        [{ 'indent': '-1' }, { 'indent': '+1' }],           // 缩进
                        [{ 'list': 'ordered' }, { 'list': 'bullet' }],      //列表
                        [{ 'script': 'sub' }, { 'script': 'super' }],       // 上下标
                        ['blockquote', 'code-block'],                       //引用，代码块
                        ['clean'],                                          //清除字体样式
                        ['image', 'video']                                  //上传图片、上传视频
                    ]
                },
                theme: 'snow'
            }
        }
    },
    mounted() {
        this.initQuill();
    },
    beforeDestroy() {
        this.quillObj = null
        delete this.quillObj
    }, 
    methods: {
        //初始化quill编辑器
        initQuill() {
            this.quillObj = new Quill('#quillEditor', this.quillOption);
        },
        //获取编辑的html内容
        getQuillHtmlText() {
            let text = this.quillObj.container.firstChild.innerHTML;
            console.log('quill text =====>>>', text);
        }
    }
}

注：上面代码中的font.css的编辑和使用：

//main.js中引入样式（尝试过在页面中引用font.css文件，但是无效，推测可能是scoped的原因）

import '@/assets/quillEditor/font.css'



//font.css

.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimSun"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimSun"]::before {
  content: "宋体";
  font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="SimHei"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="SimHei"]::before {
  content: "黑体";
  font-family: "SimHei";
}
.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Microsoft-YaHei"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Microsoft-YaHei"]::before {
  content: "微软雅黑";
  font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="KaiTi"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="KaiTi"]::before {
  content: "楷体";
  font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="FangSong"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="FangSong"]::before {
  content: "仿宋";
  font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="Arial"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="Arial"]::before {
  content: "Arial";
  font-family: "Arial";
}
.ql-snow
  .ql-picker.ql-font
  .ql-picker-label[data-value="Times-New-Roman"]::before,
.ql-snow
  .ql-picker.ql-font
  .ql-picker-item[data-value="Times-New-Roman"]::before {
  content: "Times New Roman";
  font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value="sans-serif"]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value="sans-serif"]::before {
  content: "sans-serif";
  font-family: "sans-serif";
}

.ql-font-SimSun {
  font-family: "SimSun";
}
.ql-font-SimHei {
  font-family: "SimHei";
}
.ql-font-Microsoft-YaHei {
  font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
  font-family: "KaiTi";
}
.ql-font-FangSong {
  font-family: "FangSong";
}
.ql-font-Arial {
  font-family: "Arial";
}
.ql-font-Times-New-Roman {
  font-family: "Times New Roman";
}
.ql-font-sans-serif {
  font-family: "sans-serif";
}

三、会遇到的问题

1、项目运行时，quill-image-resize-module插件报错如下

解决方案：在项目的webpack.base.conf.js文件中添加如下代码

const webpack = require('webpack')


const config = {

    plugins: [
        new webpack.ProvidePlugin({
            'window.Quill': 'quill/dist/quill.js',
            'Quill': 'quill/dist/quill.js'
        }),
    ]
};

module.exports = config;

四、最终结果：