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

86 阅读 0 评论 57 点赞

我是靠谱客的博主紧张短靴，这篇文章主要介绍vue-quill-editor富文本编辑器配置行高，现在分享给大家，希望可以做个参考。

复制代码

1
2
3
4
5
6
7
8
9
10
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)

工具栏配置

复制代码

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
//编辑器相关
editorOption: {
placeholder: "请在这里输入发布的内容",
modules: {
toolbar: {
container: toolbarOptions, //工具栏
handlers: {
lineheight: function (value) {
if (value) {
this.quill.format('lineHeight', value);
} else {
console.log(value);
}
}
}
}
}
}

复制代码

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

复制代码

1
2
3
4
5
6
methods: {
ready() {
Quill.register({ 'formats/lineHeight': lineHeightStyle }, true);
},
}

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

复制代码

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
<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>