场景

由于官方自带的字体大小只有Samll,Normal,Large,Huge这四种,在实际开发中肯定是不满足要求的,此时我们需要手动修改下载的本地仓库中的相关js和css,

需要注意的是,在生产环境部署中,需要在本地打包上传,不然恢复默认状态

Quill编辑器的使用

1. 引入依赖

cnpm install vue-quill-editor

2. 页面代码

```html

全局样式设置toolbarOptions.js ```js const toolbarOptions = [ ['bold', 'italic', 'underline', 'strike'],
['blockquote', 'code-block'], [{'header': 1}, {'header': 2}],
[{'list': 'ordered'}, {'list': 'bullet'}], [{'script': 'sub'}, {'script': 'super'}],
[{'indent': '-1'}, {'indent': '+1'}],
[{'direction': 'rtl'}],
[{'size': ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] }], [{'header': [1, 2, 3, 4, 5, 6, false]}], [{'color': []}, {'background': []}],
[{'font': ['SimSun', 'SimHei','Microsoft-YaHei','KaiTi','FangSong','Arial','Times-New-Roman','sans-serif']}], [{'align': []}], ['link', 'image', 'video'], ['clean']
] export default toolbarOptions

```

3. 样式修改

1. 改动1

修改字体大小,文件路径在 *\node_modules\quill\dist路径下的quill.core.js 文件里 大概在6115行,可以直接搜索size修改 js var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] }); var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] });

2. 改动2

文件路径在 *\node_modules\quill\dist路径下的quill.js 文件里修改 ```js var SizeClass = new _parchment2.default.Attributor.Class('size', 'ql-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] }); var SizeStyle = new _parchment2.default.Attributor.Style('size', 'font-size', { scope: _parchment2.default.Scope.INLINE, whitelist: ['10px', '12px', '14px','16px','18px','20px','24px','26px','32px','48px'] });

```

3. 改动3

文件路径在 *\node_modules\quill\dist路径下的quill.core.css 文件里中添加 ```css .ql-editor .ql-size-10px { font-size: 10px; } .ql-editor .ql-size-12px { font-size: 12px; } .ql-editor .ql-size-14px { font-size: 14px; } .ql-editor .ql-size-16px { font-size: 16px; } .ql-editor .ql-size-18px { font-size: 18px; } .ql-editor .ql-size-20px { font-size: 20px; } .ql-editor .ql-size-24px { font-size: 24px; } .ql-editor .ql-size-26px { font-size: 26px; } .ql-editor .ql-size-32px { font-size: 32px; } .ql-editor .ql-size-48px { font-size: 48px; }

```

文件路径在 *\node_modules\quill\dist路径下的quill.bubble.css 文件里中添加 css .ql-editor .ql-size-10px { font-size: 10px; } .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'; } .ql-editor .ql-size-12px { font-size: 12px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { font-size: 12px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="12px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="12px"]::before { content: '12px'; } .ql-editor .ql-size-14px { font-size: 14px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { font-size: 14px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="14px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="14px"]::before { content: '14px'; } .ql-editor .ql-size-16px { font-size: 16px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { font-size: 16px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="16px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="16px"]::before { content: '16px'; } .ql-editor .ql-size-18px { font-size: 18px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { font-size: 18px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; } .ql-editor .ql-size-20px { font-size: 20px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { font-size: 20px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="20px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="20px"]::before { content: '20px'; } .ql-editor .ql-size-24px { font-size: 24px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { font-size: 24px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="24px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="24px"]::before { content: '24px'; } .ql-editor .ql-size-26px { font-size: 26px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { font-size: 26px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { content: '26px'; } .ql-editor .ql-size-32px { font-size: 32px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { font-size: 32px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; } .ql-editor .ql-size-48px { font-size: 48px; } .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { font-size: 48px; } .ql-bubble .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before, .ql-bubble .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48px'; }

文件路径在 *\node_modules\quill\dist路径下的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'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="10px"]::before { font-size: 10px; } .ql-editor .ql-size-12px { font-size: 12px; } .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-item[data-value="12px"]::before { font-size: 12px; } .ql-editor .ql-size-14px { font-size: 14px; } .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-item[data-value="14px"]::before { font-size: 14px; } .ql-editor .ql-size-16px { font-size: 16px; } .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-item[data-value="16px"]::before { font-size: 16px; } .ql-editor .ql-size-18px { font-size: 18px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="18px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { content: '18px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="18px"]::before { font-size: 18px; } .ql-editor .ql-size-20px { font-size: 20px; } .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-item[data-value="20px"]::before { font-size: 20px; } .ql-editor .ql-size-24px { font-size: 24px; } .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-item[data-value="24px"]::before { font-size: 24px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="26px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { content: '26px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="26px"]::before { font-size: 26px; } .ql-editor .ql-size-32px { font-size: 32px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="32px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { content: '32px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="32px"]::before { font-size: 32px; }.ql-editor .ql-size-64px { font-size: 64px; } .ql-snow .ql-picker.ql-size .ql-picker-label[data-value="48px"]::before, .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { content: '48px'; } .ql-snow .ql-picker.ql-size .ql-picker-item[data-value="48px"]::before { font-size: 48px; }

```

4. 最终效果

Quill编辑器自定义字体和字体大小相关推荐

  1. python使用matplotlib可视化、为可视化图像添加标题（title）、自定义标题的字体格式、字体大小、字体颜色等

    python使用matplotlib可视化.为可视化图像添加标题(title).自定义标题的字体格式.字体大小.字体颜色等 目录

  2. python使用matplotlib可视化、为可视化图像添加图例（legend）、自定义图例的字体格式、字体大小、字体颜色等

    python使用matplotlib可视化.为可视化图像添加图例(legend).自定义图例的字体格式.字体大小.字体颜色等 目录

  3. seaborn可视化散点图并自定义图像的标题（title）以及自定义标题的字体大小（Set a Title to a Seaborn Plot）

    seaborn可视化散点图并自定义图像的标题(title)以及自定义标题的字体大小(Set a Title to a Seaborn Plot) 目录

  4. Linux字体大小颜色,Linux技巧：自定义Gnome面板字体和颜色

    早些时候.我们讲了如何使Gnome面板完全透明化[可查看文章http://www.linuxidc.com/Linux/2011-02/32461.htm],但是你可能仍然需 早些时候.我们讲了如何使 ...

  5. Markdown (CSDN) MD编辑器（二）- 文本样式(更改字体、字体大小、字体颜色、加粗、斜体、高亮、删除线)

    目录 1.Markdown现有的文本样式. 2.HTML的font标签-改字体.字体颜色.字体大小. 3.HTML的mark标签-标记文本 4.HTML的strong标签-加粗文本 5.HTML的em ...

  6. “公式编辑器”的MT Extra字体无效，将无法显示和打印某些字符将。 请重新安装公式编辑器”，以便正确安装其字体。

    在使用word自带的公式编辑器时,每次都会出现这个弹窗,快给俺烦死了,几经查找,解决了这个问题. 在"我的电脑"中,找到 C:\Windows\Fonts 这个文件夹,这个是电脑上 ...

  7. Oracle数据库怎么调大字体,CFree怎么调大字体 设置字体大小的方法

    CFree作为一款专业的编程工具,它可以帮助用户轻松解决解析输入的代码程序,小编了解到很多用户不知道怎么调大字体,如果你想要设置字体的方法,就赶快来看看下面的操作方法,相信只要你看完就会明白的! 类别 ...

  8. CSDN写博客字体颜色、大小怎么写？

    CSDN写博客字体颜色.大小怎么写? CSDN-markdown编辑器,内嵌HTML,可以对编写的内容进行类似于css样式修改 , 注意:只允许内嵌css样式! 字体.字号与颜色.背景颜色 我是黑体字 ...

  9. python3-xlwt-Excel设置表格基础(字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划线 斜体字 单元格对齐方式 自动换行 删除线 超链接 插入公式)

    文章目录 引入xlwt和创建workboos对象 初始化样式和创建设置字体,赋值给style 保存文件 自定义样式 字体颜色 背景颜色 设置边框 边框颜色 冻结窗口 字体大小 字体高度 字体加粗 下划 ...

最新文章

  1. python 没反应 生成exe_通过 pyinstaller 将 python 脚本打包成可执行程序！
  2. 如何在 Swift 语言下使用 iOS Charts API 制作漂亮图表？
  3. elementui select组件选中后无法自动刷新更新值渲染到页面中
  4. 【以太坊】搭建测试网络之ubuntu系统安装geth客户端以及同步区块数据
  5. keras从入门到放弃(七）多层感知器训练
  6. .Net Core中IOC容器的使用
  7. java - 求a+aa+aaa+aa...a之和
  8. 过去几年接触了很多小公司小品牌
  9. cgblib 代理接口原理_一文搞懂Java中静态代理、动态代理以及CGLIB代理
  10. java socket 异常处理_java.net.SocketException四大异常解决方案
  11. 笨方法学习python
  12. WPS插入页码，自动生成目录
  13. maya海龟烘焙法线_maya法线烘焙
  14. 【ECCV2018 UPDT】Unveiling the Power of Deep Tracking[特征融合]
  15. 分享|百度ACE智能交通“双智”实践蓝皮书（附PDF）
  16. CSS：CSS层叠样式表的概述
  17. java舞会配对程序_舞会心动男/女生配对问题
  18. 【实战佳作】微软的《编程之美》
  19. 编译原理 期末考试复习题
  20. 【排序】什么都能排的C语言qsort排序详解【超详细的宝藏级别教程】深度理解qsort排序

热门文章

  1. 使用nginx -g daemon off启动nginx容器的原因
  2. python计算圆的面积的流程图_使用python计算圆的面积
  3. 125KHz 100cm ID 读卡电路_北京中关村集成电路设计园发展有限责任公司增资项目...
  4. C++计算球弹跳的高度
  5. 区块链技术数字货币时代
  6. 达梦数据库或者oracle数据库报错： 超过最大参数个数(32767)
  7. 喜用神最正确的算法_关于RFID系统的防碰撞算法有哪些呢？
  8. zencart删除或清空网站的所有订单,顾客,和商品
  9. python requests 下载excel_python+request+excel
  10. Bootstrap常用属性含义