首页 > 其他 > 详细

quill修改字体大小

时间:2020-07-20 17:28:57      阅读:69      评论:0      收藏:0      [点我收藏+]

1.设置字体大小

 [‘bold‘, ‘italic‘, ‘underline‘, ‘strike‘], //加粗,斜体,下划线,删除线
[‘blockquote‘, ‘code-block‘], //引用,代码块
[{‘header‘: 1}, {‘header‘: 2}],// 标题,键值对的形式;1、2表示字体大小
[{‘list‘: ‘ordered‘}, {‘list‘: ‘bullet‘}], //列表
[{‘script‘: ‘sub‘}, {‘script‘: ‘super‘}],// 上下标
[{‘indent‘: ‘-1‘}, {‘indent‘: ‘+1‘}],// 缩进
[{‘direction‘: ‘rtl‘}],// 文本方向
[{‘size‘:  [‘10px‘, ‘12px‘, ‘14px‘, ‘16px‘ ,‘18px‘, ‘20px‘, ‘22px‘, ‘24px‘, ‘26px‘, ‘32px‘, ‘48px‘]}],// 字体大小
// [{‘size‘: fontSizeStyle.whitelist}],// 默认字体大小
[{‘header‘: [1, 2, 3, 4, 5, 6, false]}],//几级标题
[{‘color‘: []}, {‘background‘: []}],// 字体颜色,字体背景颜色
// [{‘font‘: []}], //字体
[{ ‘font‘: fonts }],       //字体,把上面定义的字体数组放进来
[{‘align‘: []}], //对齐方式
[‘clean‘],//清除字体样式
[‘link‘, ‘image‘, ‘video‘], //上传图片、上传视频

2.修改配置里的字体

在\node_modules\quill-image-resize-module\node_modules\quill\dist路径下的quill.core.js 文件里
技术分享图片

quill.js

 技术分享图片

quill.bubble.css 

// 需要全部增加一下css选项,需要注意的是data-value=如果是接数字要有引号,字符串可以不带引号
//10px,12px等等新设置的大小都要设置相应的类名字体大小
.ql-editor .ql-size-10px {
    font-size: 10px;
}
// select选择的字体大小
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    font-size: 10px;
}
.ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="10px"]::before,
.ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    content: ‘10px‘;    
}

quill.core.css

// 需要全部增加一下css选项
.ql-editor .ql-size-10px {
    font-size: 10px;
}

quill.snow.css 

// 需要全部增加一下css选项
.ql-editor .ql-size-10px {
    font-size: 10px;
}
.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‘;
}
// select选择的字体大小
.ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before {
    font-size: 10px;
}

 

 

 

quill修改字体大小

原文:https://www.cnblogs.com/meiyanstar/p/13345679.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!