vue-quill-editor 自定义文字字号

最新推荐文章于 2024-08-09 17:58:26 发布

＊且听风吟

最新推荐文章于 2024-08-09 17:58:26 发布

阅读量1.7k

点赞数 1

分类专栏： # Vue 2.x 文章标签： vue.js javascript ecmascript

本文链接：https://blog.csdn.net/HH18700418030/article/details/120164058

版权

这篇博客介绍了如何在vue-quill-editor中自定义文字字号。通过定义字号、修改toolbar配置以及添加样式，实现了选择具体字号如16px、20px的功能，允许用户在富文本编辑器中自由设定字体大小。

摘要由CSDN通过智能技术生成

默认的 vue-quill-editor 富文本编辑器的字号选择很少，只有默认的几种可选，如下：
在这里插入图片描述
要设置具体的字号，比如16px，20px等，就需要自定义字号。

（1）定义字号：

let fontSize = ['10px', '12px', '14px', '16px', '20px', '24px', '36px']
Quill.imports['attributors/style/size'].whitelist = fontSize;
Quill.register(Quill.imports['attributors/style/size'])

（2）修改 toolbar工具栏中的 size 设置为： [{ 'size': fontSize }]

（3）样式文件中加入：

.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 {
   
  content: '16px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='20px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='20px']::before {
   
  content: '20px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='24px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='24px']::before {
   
  content: '24px';
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value='36px']::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value='36px']::before {
   
  content: '36px';
}