当前位置: 首页 > article >正文

Quill Editor 富文本编辑器的高度问题

问题现象

1. 编辑框只有一行高;

2. 编辑框高度足够,但显示不全,左侧有滚动条。向下拉滚动条,编辑框把工具栏向上顶出去,工具栏看不见了。

网上搜出来一大堆各种说法,照猫画虎,有时候对,有时候不对。这些说法没一个把原因说清楚。

问题的解决

我老人家打开浏览器的开发者模式,看看这个编辑器的各个元素究竟都有什么刚浪style

然后才发现:

1. 编辑框那个文字输入框,它的 class 是 ql-editor;

2. 这个编辑框是包在另外一个 div 里面的,它的 class 是 ql-container

经过我测试,在页面里面,写:

<style>
  .ql-editor{
     height: 400px;
     };

</style>

完全没用!

有用的是以下的写法:

<style>
  ql-container{
     height: 400px;
  };

</style>

记录一下。遇到有类似问题的同学,可以参考一下我的方法:打开浏览器的开发者工具去查看页面元素究竟对应哪个 CSS。

又及:

编辑框里面,默认的字体很小,看起来不舒服。想设置字体大小,针对的是 ql-editor,代码:

.ql-editor{
       font-size: 18px;
     };

又及及及:

针对 ql-editor 设置字体后,字体是变大了,但是那个编辑框也变大,导致编辑器总高度不够,使得再次出现侧边滚动框。滚动后,工具栏又被滚走了。

终极解决方案:

#editor.edit_container.ql-container.ql-snow{
       height: 400px;
       font-size: 18px;
     };

一定要把前面提到的 .ql-editor 的样式从页面文件里面删除。

这个 #editor.edit_container.ql-container.ql-snow 实际上是 ql.editor 外面一层的容器 div 。设置它的字体和高度,完美实现字体尺寸和整个编辑器高度的设置。这样做,我测试,没用出现滚动条,让工具栏被滚走的情况。


http://www.kler.cn/news/325711.html

相关文章:

  • SWAP、AquaCrop、FVCOM、Delft3D、SWAT、R+VIC、HSPF、HEC-HMS......
  • 云计算中过等保三级需要的网络安全设备及详细讲解
  • 可视化大屏
  • CTFshow-SSRF
  • JSP(Java Server Pages)基础使用二
  • 自制CANTool_DBC_Layout仿制_布局读取Signal(三)
  • 【ShuQiHere】AVL 树(AVL Tree):如何保持二叉搜索树的平衡性?
  • 重构长方法之提取方法
  • 9.26-9.29学习
  • 信息安全数学基础(21)高次同余式的解数及解法
  • 【C++题目】7.双指针_和为 s 的两个数字
  • Python | Leetcode Python题解之第447题回旋镖的数量
  • 【linux 多进程并发】linux进程状态与生命周期各阶段转换,进程状态查看分析,助力高性能优化
  • 【C++——文件操作】
  • Allen Institute for Artificial Intelligence (Ai2) 发布开源多模态语言模型 Molmo
  • Mixture-of-Experts (MoE): 条件计算的诞生与崛起【下篇】
  • 四十四、多云/混合云架构设计(安全与合规策略)
  • watchEffect工作原理
  • docker学习笔记(1.0)
  • 面经4——亚信
  • Visual Studio Code 高级使用技巧:插件推荐、调试技巧与工作流优化
  • 【HTML5】html5开篇基础(5)
  • 怎么屏蔽统计系统统计到的虚假ip
  • 【分布式微服务云原生】探索RPC:远程过程调用的奥秘与技术实现
  • 汽车信息安全 -- 再谈车规MCU的安全启动
  • 【小程序 - 大智慧】Expareser 组件渲染框架
  • CSS学习 - 常用属性
  • python自动更新chromedriver
  • ExpansionPanelList组件的用法
  • 【Android 14源码分析】Activity启动流程-2