vue-quill-editor富文本编辑器配置行高

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

工具栏配置

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

//编辑器相关
editorOption: {
placeholder: "请在这里输入发布的内容",
modules: {
toolbar: {
container: toolbarOptions, //工具栏
handlers: {
lineheight: function (value) {
if (value) {
this.quill.format('lineHeight', value);
} else {
console.log(value);
}
}
}
}
}
}

<quill-editor @ready="ready($event)" :options="editorOption"></quill-editor>

methods: {
ready() {
Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
},
}

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

<style lang="scss">
//配置编辑器行高
.ql-snow .ql-picker.ql-lineheight .ql-picker-label::before {
content: '行高';
}
.ql-snow .ql-picker.ql-lineheight .ql-picker-item[data-value='initial']::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;
}
</style>

最后

以上就是紧张短靴为你收集整理的vue-quill-editor富文本编辑器配置行高的全部内容，希望文章能够帮你解决vue-quill-editor富文本编辑器配置行高所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。