写在前面的话【样式不能加scoped】

0、通过css给行高添加标题以及样式【不能加scoped】：

样式设置，注意：不能加scoped：

.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1']::before {content: '1';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.5']::before {content: '1.5';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='1.75']::before {content: '1.75';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='2']::before {content: '2';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='3']::before {content: '3';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='4']::before {content: '4';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='5']::before {content: '5';
}
.ql-snow .ql-picker.ql-lineheight {width: 70px;
}

1、创建样式文件：

创建一个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 }

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

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

3、工具栏配置：

配置行高参数：

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

配置行高响应函数：

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

      // 富文本编辑器配置editorOption: {placeholder: '请在这里输入',theme: 'snow', //主题 snow/bubblehistory: {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)}}}},}}

4、注册样式：

监听ready事件：

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

注册lineHeightStyle：

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

import Quill from 'quill'
methods: {// 准备富文本编辑器onEditorReady (quill) {Quill.register({ 'formats/lineHeight': lineHeightStyle }, true)}
}