quill自定义（工具栏、字体大小、字号等） |
您所在的位置：网站首页 › 富文本工具条插件 › quill自定义（工具栏、字体大小、字号等） |
|
quill功能拓展及扩展属性
quill自定义字体大小quill自定义字体源代码展示自定义行高图片删除div等标签注册
最近一直在使用若依的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等标签注册等等，如有需要定制功能，可以点赞、关注私信我，我来帮你解决。 |
今日新闻 |
推荐新闻 |
| CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |