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)