vue2 使用 vue-quill-editor富文本编辑器使用步骤

1.安装

yarn add quill@1.3.7
yarn add  quill-image-drop-module@1.0.3
yarn add quill-image-extend-module@1.1.2
yarn add quill-image-resize-module@3.0.0
yarn add vue-quill-editor@3.0.6

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'
 
export default {
   
  components: {
   
    quillEditor
  }
}

3.在页面上写组件

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

4.配置option

// 富文本编辑器配置
      editorOption: {
   
        modules: {
   
          toolbar: [
            ['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'] // 链接、图片、视频
          ]
        },
        placeholder: '请输入正文'
      },

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

汉化富文本

// 这个是字号数字对应的显示的内容，vertical-align根据个人需要加不加，因为我页面那个字与其他对不齐
.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'