vue-quill-editor文字大小和字体设置中文化 https://blog.csdn.net/weixin_45899022/article/details/107108346

1、导入quill

import Quill from “quill”;
1
2、配置字体列表

let fontSizeStyle = Quill.import(“attributors/style/size”);
fontSizeStyle.whitelist = [
“12px”,
“14px”,
“16px”,
“18px”,
“20px”,
“22px”,
“24px”,
“26px”
];
Quill.register(fontSizeStyle, true);
1
2
3
4
5
6
7
8
9
10
11
12
3、定义配置项（把size的值定义为fontSizeStyle.whitelist）

editorOption: {
placeholder: “请在此输入文本…”,
modules: {
toolbar: [
[“bold”, “italic”, “underline”],
[{ header: 1 }, { header: 2 }],
[{ list: “ordered” }, { list: “bullet” }],
[{ indent: “-1” }, { indent: “+1” }],
[{ direction: “rtl” }],
[{ size: fontSizeStyle.whitelist }],
[{ header: [1, 2, 3, 4, 5, 6, false] }],
[{ color: [] }],
[{ font: [] }],
[{ align: [] }],
[“link”, “image”]
]
}
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
完整代码：

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“12px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“12px”]::before {
content: “12px”;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“14px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“14px”]::before {
content: “14px”;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“16px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“16px”]::before {
content: “16px”;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“18px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“18px”]::before {
content: “18px”;
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“20px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“20px”]::before {
content: “20px”;
}
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“22px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“22px”]::before {
content: “22px”;
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“24px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“24px”]::before {
content: “24px”;
}

/deep/ .ql-snow .ql-picker.ql-size .ql-picker-label[data-value=“26px”]::before,
/deep/ .ql-snow .ql-picker.ql-size .ql-picker-item[data-value=“26px”]::before {
content: “26px”;
}

————————————————
版权声明：本文为CSDN博主「@~~涛」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/weixin_45899022/article/details/107108346