vue-quill-editor 富文本编辑框 —— 自定义行高

一、创建样式文件：

创建一个lineHeight.js，在里实例化一个lineHeightAttributor对象：

import Quill from "quill";
const Parchment = Quill.import("parchment");
class lineHeightAttributor extends Parchment.Attributor.Style {
    }
const lineHeightStyle = new lineHeightAttributor("lineHeight", "line-height", {
   
  scope: Parchment.Scope.INLINE,
  whitelist: ["1", "1.5", "1.75", "2", "3", "4", "5"]
});

export {
    lineHeightStyle }

二、在vue文件中导入样式对象：

import {
    lineHeightStyle } from '@/utils/lineHeight'

三、工具栏配置：

配置行高参数：

const toolbarOptions = [
  [{
    lineheight: ['initial', '1', '1.5', '1.75', '2', '3', '4', '5'] }]
]

配置行高响应函数：

在vue-quill-editor的配置参数里面配置设置行高的响应函数（放到handlers里面）：

      // 富文本编辑器配置
      editorOption: {
   
        placeholder: '请在这里输入',
        theme: 'snow', //主题 snow/bubble
        history: {
   
          delay: 1000,
          maxStack: 50,
          userOnly: false
        },
        modules: {
   
          toolbar: {
   
            container: toolbarOptions, //工具栏
            handlers: {
   
              lineheight: (value) => {
   
                if (value) {
   
                  let quill = this.$refs.myQuillEditor.quill;
                  quill.format("lineHeight", value)
                }
              }
            }
          },
        }
      }

四、注册样式：

监听ready事件：

在vue-quill-editor上面监听ready事件（@ready=“onEditorReady($event)”：

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

注册lineHeightStyle：

在编辑器的 ready 事件响应函数中注册lineHeightStyle：

methods: {
   
    // 准备富文本编辑器
    onEditorReady (quill)