集众家之言后,我采用以下方式初步实现了设置默认字体大小

1、全局引入以下内容,完成自定义字号的注册

import * as Quill from 'quill';

let fontSizeStyle = Quill.import('attributors/style/size');

fontSizeStyle.whitelist = ['10px', '12px', '14px', '16px', '20px', '24px', '36px', false];

2、在editor的配置项中配置size菜单

export default {

data() {

editorOption: {

modules: [

[{ 'size': fontSizeStyle.whitelist }]

]

}

}

}

3、写入对应css样

.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';

}

4、给编辑器配置默认字体大小

以上操作后,默认会选中false配置项,此时需要给编辑器写入默认样式

.ql-container {

font-size:16px;

}

quilleditor 字体大小设置_vue-quill-editor如何设置字体默认大小?相关推荐

  1. android webview 字体 系统字体大小,【转】android webview设置内容的字体大小

    Enum for specifying the text size. SMALLEST is 50% SMALLER is 75% NORMAL is 100% LARGER is 150% LARG ...

  2. div html表格样式设置字体大小,css样式表中如何修改字体大小为18px?

    css样式表中如何修改字体大小为18px?下面本篇文章给大家介绍一下.有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助. css样式表中如何修改字体大小为18px? 在css样式表中可以 ...

  3. IntelliJ IDEA 字体大小缩放式更改的快捷键设置(很实用!)

    1.打开IDEA,点击File→Settings 2.点击Keymap→Editor Actions,然后开始设置,找到Decrease Font Size 3.双击Decrease Font Siz ...

  4. javafx label设置字体大小_如何把智能手机,设置成老年人模式?

    hello大家好!我是方脸鸭! 如果你买了新的手机,那么旧的手机无非就是放闲鱼,或者拿给家里的长辈们使用.那么方脸鸭今天就跟大家分享,如何把智能手机设置得更符合家里的长辈使用. [详情请看视频讲解] ...

  5. html网站手机最小字体大小,html在手机浏览器如何设置字体大小

    动态计算好html的font-size之后,我们设置的大小不一定是真实的大小,所以,我们需要在设置完字体大小之后,再去重新获取一下html的font-size,看看实际的这个值(webview受到系统 ...

  6. android 设置字体大小和不同颜色,Android代码中设置字体大小,字体颜色,显示两种颜色.倒计时效果...

    Android代码中设置字体大小,字体颜色,显示两种颜色 在xml文件中字体大小用的像素 android:id="@+id/uppaid_time" android:layout_ ...

  7. uniapp开发的微信公众号,微信设置字体大小或者关怀模式,页面布局字体大小不受影响的解决方法

    在uniapp的app.vue的script标签内添加以下代码 (function(){//安卓端function handleFontSize () {// 设置网页字体为默认大小WeixinJSB ...

  8. css设置字体大小会受分辨影响吗,CSS字体大小设置时的参考(转)

    font-size 设置的绝对关键字: 以下几个绝对字体大小的设置是有效的.当然他们是浏览器预定义设置的.给元素指定了绝对关键字font-size的时候,该元素就不会继承父元素的字体大小 font-s ...

  9. android 字体慢慢变大 网易新闻,如何在网易新闻中设置字体大小?在网易新闻中设置字体大小的方法...

    大家经常使用网易新闻吧,我们可以在里面查看许多新的消息,下面小编给大家分享一下在网易新闻中设置字体大小的方法,希望会对你有所帮助. 1.打开网易新闻客户端,进入网易新闻主界面后,在主界面中可以看到当天 ...

  10. html怎么按钮设置字体大小,更改按一个按钮的HTML字体大小

    嗨,大家好我写了一个简单的应用程序,在web视图中显示一个html文件,该html文件在主包中. 我不知道我怎样才能使HTML文件字体大小大/小由两个按钮 这是我的.m更改按一个按钮的HTML字体大小 ...

最新文章

  1. Redis和消息队列使用实战
  2. python基础常用语句-Python基础语法
  3. WinDBG调试dNet程序总结
  4. 【NLP】从0梳理1场NLP赛事!
  5. Linux基础命令(常用的)
  6. Win10 下使用 ionic 框架开发 android 应用之搭载开发环境
  7. oracle删除建分区索引,Oracle分区表之创建维护分区表索引的详细步骤
  8. android 注解点击事件,android click事件注解
  9. vim查找关键字_VIM学习笔记 对话框(Dialog)
  10. mysql id div 1000000_Mysql数据自动ID编号,如何解决?
  11. Android 音频开发(三) 如何播放一帧音频数据上
  12. Webservice 的安全
  13. @RestController与@RequestMapping
  14. c# zxing条形码设置密度_C# 中 ZXing.Net 怎样突破 条形码 多识别 数量限制
  15. Android--数据存储
  16. 一图精通python3
  17. 五个维度打造研发管理体系
  18. 自动化测试的流程是什么
  19. MIMO技术杂谈(一):鱼与熊掌能否兼得?--浅谈分集与复用的权衡
  20. fatal: the remote end hung up unexpectedly问题解决办法

热门文章

  1. python语言特点依赖平台吗_python语言的特点
  2. 基于k8s多集群隔离环境下的devops实现
  3. 如何实现阿里云容器镜像服务反向访问代理?
  4. 快手基于 Flink 的持续优化与实践
  5. 云原生中间件与开源自建TCO对比
  6. mysql ddl crash,MySQL5.6 crash-safe replication一个坑
  7. 90页Numpy精华、算法刷题44天等内容整理
  8. Galgame研发日志:美术工作实乃重中之重
  9. 《秦时明月世界》手游如何用Unity定制化渲染管线?
  10. PS5独占游戏RETURNAL:华丽的黑暗电子声音是如何制作的(新 3D 音频引擎)下