quill功能拓展及扩展属性
最近一直在使用若依的vue分离版本后台管理，由于项目中需要富文本模块较多及需要自定义添加属性，导致现有的quill富文本不满足需求。经百度对比多个富文本优缺点，最后还是因为quill扩展性强，决定采用了quill，于是便有了下面这篇记录。
quill自定义字体大小
自定义字号功能是最先增加的，由于经验不足也踩了不少坑，刚开始网上文章都是让去修改源码来增加字号，自己也照着改了下，刚开始确实没问题，但是随着时间推移，部分人依赖包不是修改过的，导致修改字号失灵。
好了，不多废话直接上代码。
// 增加字体大小配置项
var FontAttributor = Quill.import('attributors/class/size');
FontAttributor.whitelist = [
'ft10', 'ft12', 'ft14', 'ft16', 'ft18',"ft32",
];
Quill.register(FontAttributor, true);
//toolbar 配置
toolbar: {
container:[
[{ size: ["ft10", 'ft12', 'ft14', 'ft16', "ft18", "ft32"] }], // 字体大小
],
}
css部分
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft10"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft10"]::before {
content: "10px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft12"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft12"]::before {
content: "12px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft14"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft14"]::before {
content: "14px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft16"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft16"]::before {
content: "16px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft18"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft18"]::before {
content: "18px";
}
.ql-snow .ql-picker.ql-size .ql-picker-label[data-value="ft32"]::before,
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="ft32"]::before {
content: "32px";
}
.ql-size-ft10 {
font-size: 10px;
}
.ql-size-ft12 {
font-size: 10px;
}
.ql-size-ft14 {
font-size: 14px;
}
.ql-size-ft16 {
font-size: 16px;
}
.ql-size-ft18 {
font-size: 18px;
}
.ql-size-ft32 {
font-size: 32px;
}
其中需要注意的就是配置项列表要对应起来，还需要有对应css样式。
quill自定义字体
// 字体扩展
var fonts = ['monospace', 'FangSong', 'Microsoft-YaHei','SimSun','serif','SimHei','KaiTi','Arial','sans-serif'];
var Font = Quill.import('formats/font');
Font.whitelist = fonts; //将字体加入到白名单
Quill.register(Font, true);
//toolbar 配置
toolbar: {
container:[
[{ 'font': fonts }], //字体
],
}
css部分
/* 字体样式 */
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimSun]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimSun]::before {
content: "宋体";
font-family: "SimSun";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=SimHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=SimHei]::before {
content: "黑体";
font-family: "SimHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Microsoft-YaHei]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Microsoft-YaHei]::before {
content: "微软雅黑";
font-family: "Microsoft YaHei";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=KaiTi]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=KaiTi]::before {
content: "楷体";
font-family: "KaiTi";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=FangSong]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=FangSong]::before {
content: "仿宋";
font-family: "FangSong";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Arial]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Arial]::before {
content: "Arial";
font-family: "Arial";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=Times-New-Roman]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=Times-New-Roman]::before {
content: "Times New Roman";
font-family: "Times New Roman";
}
.ql-snow .ql-picker.ql-font .ql-picker-label[data-value=sans-serif]::before,
.ql-snow .ql-picker.ql-font .ql-picker-item[data-value=sans-serif]::before {
content: "sans-serif";
font-family: "sans-serif";
}
.ql-font-SimHei {
font-family: "SimHei";
}
.ql-font-SimSun {
font-family: "SimSun";
}
.ql-font-Microsoft-YaHei {
font-family: "Microsoft YaHei";
}
.ql-font-KaiTi {
font-family: "KaiTi";
}
.ql-font-FangSong {
font-family: "FangSong";
}
.ql-font-Arial {
font-family: "Arial";
}
.ql-font-Times-New-Roman {
font-family: "Times New Roman";
}
.ql-font-sans-serif {
font-family: "sans-serif";
}
这些只是对quill富文本本身功能的扩展，当然还有些功能的扩展，如
源代码展示
自定义行高
图片删除
div等标签注册
等等，如有需要定制功能，可以点赞、关注私信我，我来帮你解决。
