quill富文本编辑器自定义字体、文字大小（编辑器内含element上传组件）

最新推荐文章于 2025-04-09 13:45:38 发布

一首弦曲献仙音

最新推荐文章于 2025-04-09 13:45:38 发布

阅读量2.4k

点赞数 1

分类专栏：其他文章标签：编辑器前端

本文链接：https://blog.csdn.net/qq_42660374/article/details/129625888

版权

这段代码展示了如何在Vue.js应用中使用Quill编辑器自定义字体和文字大小，包括引入自定义字体列表、设置文字大小选项，并通过CSS调整菜单栏显示。此外，还添加了行高和图片上传功能，以及处理上传图片的逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

如下是我们需要得到的文字大小和字体的效果:

自定义字体、文字大小JS部分：

//引入Qill插件
import Quill from "quill";

// 自定义字体


let fontFamily = ['宋体', '黑体', '微软雅黑', '楷体', '仿宋', 'Arial', '苹方'];
Quill.imports['attributors/style/font'].whitelist = fontFamily;
Quill.register(Quill.imports['attributors/style/font']);

// 自定义文字大小
let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
Quill.imports['attributors/style/size'].whitelist = fontSize;
Quill.register(Quill.imports['attributors/style/size']);

const toolbarOptions = [
  [
    "bold",
    "italic",
    "underline",
    "strike",
    "blockquote",
    "code-block",
    { header: 1 },
    { header: 2 },
    { list: "ordered" },
    { list: "bullet" },
    { indent: "-1" },
    { indent: "+1" },
    { script: "sub" }, // 下标
    { script: "super" }, // 上标
    { align: [] },
    { color: [] },
    { background: [] },
    "link",
    "image",
  ],
  [{ size: fontSize }], // 文字大小
  [{ header: [1, 2, 3, 4, 5, 6, false] }], // 标题
  [{ font: fontFamily }], // 字体
];

自定义字体、文字大小css部分：

/*
  文字大小
*/
.ql-snow .ql-picker.ql-size{
  width: 70px;  // 菜单栏占比宽度
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='10px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='10px']::before {
  content: '10px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='12px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='12px']::before {
  content: '12px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='14px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='14px']::before {
  content: '14px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='16px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='16px']::before

最低0.47元/天解锁文章