vue-quill-editor富文本编辑器基本的使用与步骤

一、背景

最近正在开发一个后台管理系统，公司希望用户可以随时发布一些新闻、活动之类的，所以，需要一个富文本框编辑器。网上搜索对比了很多，连markdown类型的编辑器也对比过，思前想后还是决定试用vue-quill-editor。主要原因界面操作简单、简洁，文档齐全。

二、效果展示

富文本框效果图.png

三、安装

npm install vue-quill-editor -S

四、引入到项目中

1、全局引用

富文本框在整个系统中引用的部分很少，所以，个人不建议全局引用，但是，还是把方法粘贴出来，可供大家参考

import VueQuillEditor from 'vue-quill-editor'

import 'quill/dist/quill.core.css' // import styles
import 'quill/dist/quill.snow.css' // for snow theme
import 'quill/dist/quill.bubble.css' // for bubble theme

Vue.use(VueQuillEditor)

2、界面引用

我是界面引用，直接封装了一个组件

import { quillEditor } from 'vue-quill-editor'
import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'

components: {   //界面组件引用
    quillEditor
}

五、使用vue-quill-editor

<quill-editor
    class='editor'
    v-model="content"
    ref="myQuillEditor"
    :options="editorOption"
    @blur="onEditorBlur($event)"
    @focus="onEditorFocus($event)"
    @change="onEditorChange($event)"
    @ready="onEditorReady($event)">
</quill-editor>

// 失去焦点事件
  onEditorBlur(quill) {
    console.log('editor blur!', quill)
  },
// 获得焦点事件
  onEditorFocus(quill) {
    console.log('editor focus!', quill)
  },
// 准备富文本编辑器
  onEditorReady(quill) {
    console.log('editor ready!', quill)
  },
// 内容改变事件，只需要这一个方法就够了
  onEditorChange({ quill, html, text }) {
    console.log('editor change!', quill, html, text)
    this.content = html
  }

在VUE界面中使用以下代码，就可以看到富文本框的一个大致的样子，且可以简单使用，但是，完全不满足于我们的项目要求，所以，我们还是需要进行一部分的配置。

配置editorOption

editorOption: {
    placeholder: '请输入',
    theme: "snow",
    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: ['12', '14', '16', '18', '20', '22', '24', '28', '32', '36'] }], // 字体大小
                    [{ header: [1, 2, 3, 4, 5, 6] }], // 标题
                    [{ color: [] }, { background: [] }], // 字体颜色、字体背景颜色
                    // [{ font: ['songti'] }], // 字体种类
                    [{ align: [] }], // 对齐方式
                    ['clean'], // 清除文本格式
                    ['image'] // 链接、图片，需要视频的可以加上video
             ],
             handlers: {   //此处是图片上传时候需要使用到的
                 'image': function (value) {
                           console.log(value)
                           if (value) {  // 点击图片
                              document.querySelector('#upload').click()
                           }
                      }
                 }
           },
           imageDrop: true,   // 图片拖拽
            imageResize: {     // 图片放大缩小
                  displayStyles: {
                        backgroundColor: "black",
                        border: "none",
                        color: "white"
                 },
                 modules: ["Resize", "DisplaySize", "Toolbar"]
            }
       }
}

这里的size和header经过了处理，如图：换成了自定义内容，例如，修改字号，方法如下:

1、找到node_modules里的quill/dist/quill.js

2、在文件中搜索small，快速找到，然后修改成你想要的数据

优化效果图.png

3、修改完js之后，需要添加一些css才可以生效，这里我直接写在了VUE界面中的样式里面。因为，有些是英文，所以，我通过样式将其修改为中文。注意：我们是在组件内写的样式 所以要删除 style lang=‘less’ scoped 中的 scoped,使样式全局生效。

<style lang="less">
  .editor {
        line-height: normal !important;
        height: 400px;
    }
    .ql-snow .ql-tooltip[data-mode="link"]::before {
        content: "请输入链接地址:";
    }
    .ql-snow .ql-tooltip.ql-editing a.ql-action::after {
        border-right: 0px;
        content: "保存";
        padding-right: 0px;
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item::before {
        content: "14px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="small"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="small"]::before {
        content: "10px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="large"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="large"]::before {
        content: "18px";
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="huge"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="huge"]::before {
        content: "32px";
    }

    .ql-snow .ql-picker.ql-header .ql-picker-label::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item::before {
        content: "文本";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="1"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="1"]::before {
        content: "标题1";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="2"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="2"]::before {
        content: "标题2";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="3"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="3"]::before {
        content: "标题3";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="4"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="4"]::before {
        content: "标题4";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="5"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="5"]::before {
    content: "标题5";
    }
    .ql-snow .ql-picker.ql-header .ql-picker-label[data-value="6"]::before,
    .ql-snow .ql-picker.ql-header .ql-picker-item[data-value="6"]::before {
    content: "标题6";
    }

    .ql-snow .ql-picker.ql-font .ql-picker-label::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item::before {
    content: "标准字体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="serif"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="serif"]::before {
    content: "衬线字体";
    }
    .ql-snow .ql-picker.ql-font .ql-picker-label[data-value="monospace"]::before,
    .ql-snow .ql-picker.ql-font .ql-picker-item[data-value="monospace"]::before {
    content: "等宽字体";
    }

    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="12"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
        content: '12px';
        vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="14"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
        content: '14px';
        vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="16"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
    content: '16px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
    content: '18px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="20"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
    content: '20px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="22"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
    content: '22px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="24"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
    content: '24px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="28"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
    content: '28px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
    content: '32px';
    vertical-align: top;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="36"]::before,
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
    content: '36px';
    vertical-align: top;
    }
    
    
    
    /* 这个是字号数字对应的px值 */
    .ql-editor .ql-size-12 {
    font-size: 12px;
    }
    .ql-editor .ql-size-14 {
    font-size: 14px;
    }
    .ql-editor .ql-size-16 {
    font-size: 16px;
    }
    .ql-editor .ql-size-18 {
    font-size: 18px;
    }
    .ql-editor .ql-size-20 {
    font-size: 20px;
    }
    .ql-editor .ql-size-22 {
    font-size: 22px;
    }
    .ql-editor .ql-size-24 {
    font-size: 24px;
    }
    .ql-editor .ql-size-28 {
    font-size: 28px;
    }
    .ql-editor .ql-size-32 {
    font-size: 32px;
    }
    .ql-editor .ql-size-36 {
    font-size: 36px;
    }
    
    /* 选择字号富文本字的大小 */
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="12"]::before {
    font-size: 12px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="14"]::before {
    font-size: 14px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="16"]::before {
    font-size: 16px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18"]::before {
    font-size: 18px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="20"]::before {
    font-size: 20px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="22"]::before {
    font-size: 22px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="24"]::before {
    font-size: 24px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="28"]::before {
    font-size: 28px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32"]::before {
    font-size: 32px;
    }
    .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="36"]::before {
    font-size: 36px;
    }
</style>

六、给工具栏鼠标悬停加上注意

1、 先定义一个数组，把所有的工具放在里面

const titleConfig = [
  { Choice: '.ql-insertMetric', title: '跳转配置' },
  { Choice: '.ql-bold', title: '加粗' },
  { Choice: '.ql-italic', title: '斜体' },
  { Choice: '.ql-underline', title: '下划线' },
  { Choice: '.ql-header', title: '段落格式' },
  { Choice: '.ql-strike', title: '删除线' },
  { Choice: '.ql-blockquote', title: '块引用' },
  { Choice: '.ql-code', title: '插入代码' },
  { Choice: '.ql-code-block', title: '插入代码段' },
  { Choice: '.ql-font', title: '字体' },
  { Choice: '.ql-size', title: '字体大小' },
  { Choice: '.ql-list[value="ordered"]', title: '编号列表' },
  { Choice: '.ql-list[value="bullet"]', title: '项目列表' },
  { Choice: '.ql-direction', title: '文本方向' },
  { Choice: '.ql-header[value="1"]', title: 'h1' },
  { Choice: '.ql-header[value="2"]', title: 'h2' },
  { Choice: '.ql-align', title: '对齐方式' },
  { Choice: '.ql-color', title: '字体颜色' },
  { Choice: '.ql-background', title: '背景颜色' },
  { Choice: '.ql-image', title: '图像' },
  { Choice: '.ql-video', title: '视频' },
  { Choice: '.ql-link', title: '添加链接' },
  { Choice: '.ql-formula', title: '插入公式' },
  { Choice: '.ql-clean', title: '清除字体格式' },
  { Choice: '.ql-script[value="sub"]', title: '下标' },
  { Choice: '.ql-script[value="super"]', title: '上标' },
  { Choice: '.ql-indent[value="-1"]', title: '向左缩进' },
  { Choice: '.ql-indent[value="+1"]', title: '向右缩进' },
  { Choice: '.ql-header .ql-picker-label', title: '标题大小' },
  { Choice: '.ql-header .ql-picker-item[data-value="1"]', title: '标题一' },
  { Choice: '.ql-header .ql-picker-item[data-value="2"]', title: '标题二' },
  { Choice: '.ql-header .ql-picker-item[data-value="3"]', title: '标题三' },
  { Choice: '.ql-header .ql-picker-item[data-value="4"]', title: '标题四' },
  { Choice: '.ql-header .ql-picker-item[data-value="5"]', title: '标题五' },
  { Choice: '.ql-header .ql-picker-item[data-value="6"]', title: '标题六' },
  { Choice: '.ql-header .ql-picker-item:last-child', title: '标准' },
  { Choice: '.ql-size .ql-picker-item[data-value="small"]', title: '小号' },
  { Choice: '.ql-size .ql-picker-item[data-value="large"]', title: '大号' },
  { Choice: '.ql-size .ql-picker-item[data-value="huge"]', title: '超大号' },
  { Choice: '.ql-size .ql-picker-item:nth-child(2)', title: '标准' },
  { Choice: '.ql-align .ql-picker-item:first-child', title: '居左对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="center"]', title: '居中对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="right"]', title: '居右对齐' },
  { Choice: '.ql-align .ql-picker-item[data-value="justify"]', title: '两端对齐' }
]

2、在mounted中执行循环方法

注意：页面上已经渲染好元素之后，不然会获取不到元素

mounted () {
     for (let item of titleConfig) {
            let tip = document.querySelector('.quill-editor ' + item.Choice)
            if (!tip) continue
            tip.setAttribute('title', item.title)
     }
}

七、上传图片或视频

此处上传图片或视频都将会转化为base64格式，大家可以在控制台中打印出来看下。这里我们需要将图片或视频先上传到服务器，然后，在富文本中使用图片地址。这样子可以节约很大的空间，且还非常的简洁。

图片上传效果图.png
base64格式图片.png

1、定义一个上传组件

我这使用的是Ant Design of Vue中的上传组件

<a-upload
     name="file"
    :multiple="false"
    action="#"
    :custom-request="customRequest"
    v-show="false"   //将其隐藏，只需要上传，不需要显示出来
>
    <a-button type="primary" id="upload"> <a-icon type="upload" />点击上传附件</a-button>
</a-upload>

2、添加图片点击调用，查看本文的配置editorOption

因为，我们需要在点击图片事件之前调用我们自己定义的上传方法

handlers: {   // 此处可以看上图  配置editorOption
       'image': function (value) {
               console.log(value)
               if (value) {  // 点击图片
                       document.querySelector('#upload').click()   // 通过id来调用上传方法
                }
      }
}

3、上传图片并替换地址

每个人的图片上传方法不一致，我这里只是展示上传成功之后的一些操作

// 获取光标所在位置
let quill = this.$refs.myQuillEditor.quill
let length = quill.getSelection().index
// 插入图片  
quill.insertEmbed(length, 'image', imageUrl)  // imageUrl:图片地址
// 调整光标到最后
quill.setSelection(length + 1)

八、使用图片的放大、搜小，位置的调整

1、安装组件

npm install quill-image-resize-module -S  //缩放
npm install quill-image-drop-module -S //拖动
//还需要安装quill 因为这几个插件都是依赖于quill
npm install quill -S

2、引用组件

import Quill from "quill";
import ImageResize from "quill-image-resize-module"; // 引用
import { ImageDrop } from "quill-image-drop-module";
Quill.register("modules/imageDrop", ImageDrop);
Quill.register("modules/imageResize", ImageResize); // 注册

3、在界面中配置，查看本文的配置editorOption

imageDrop: true,
imageResize: {
     displayStyles: {
     backgroundColor: "black",
     border: "none",
     color: "white"
},
modules: ["Resize", "DisplaySize", "Toolbar"]

4、在 vue.config.js中加入configureWebpack中配置

const webpack = require('webpack')

configureWebpack: config => {
        config.plugins.push(   // 富文本框图片缩放、调整位置
            new webpack.ProvidePlugin({
                'window.Quill': 'quill/dist/quill.js',//注意路径，可能与你们路径不一致
                'Quill': 'quill/dist/quill.js' //注意路径，可能与你们路径不一致
            })
        )
}

5、效果展示

缩放、调整位置效果展示.png

本文章参考文献如下：

https://blog.csdn.net/qq_44782585/article/details/123571236
https://blog.csdn.net/liuqiao0327/article/details/107126784

欢迎大家点赞支持下