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.mzph.cn/bicheng/55200.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于微信小程序的美食外卖管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、Vue项目源码、SSM项目源码 精品专栏&#xff1a;Java精选实战项目…

SPI驱动学习七(SPI_Slave_Mode驱动程序框架)

目录 一、SPI_Slave_Mode驱动程序框架1. Master和Slave模式差别1.1 主设备 (Master)1.2 从设备 (Slave)1.3 示例 2. SPI传输概述2.1 数据组织方式2.2 SPI控制器数据结构 3. SPI Slave Mode数据传输过程4. 如何编写程序4.1 设备树4.2 内核相关4.3 简单的示例代码4.3.1 master和s…

Anaconda虚拟环境默认路径在C盘怎么更改

笔者已经新建好了虚拟环境并且安装了对应库&#xff0c;输入conda env list查询发现虚拟环境竟然安装到了C盘(&#xff61;•́︿•̀&#xff61;)&#xff0c;为避免下一次创建虚拟环境出错&#xff0c;笔者现在修改默认路径置D盘&#xff08;软件安装盘&#xff09; 参考两…

二分——二分查找

题目描述 输入n个不超过109的单调不减的&#xff08;就是后面的数字不小于前面的数字&#xff09;非负整数a1,a2,…,an&#xff0c;然后进行m次询问。对于每次询问&#xff0c;给出一个整数q&#xff0c;要求输出这个数字在序列中第一次出现的编号&#xff0c;如果没有找到的话…

【Oauth2整合gateway网关实现微服务单点登录】

文章目录 一.什么是单点登录&#xff1f;二.Oauth2整合网关实现微服务单点登录三.时序图四.代码实现思路1.基于OAuth2独立一个认证中心服务出来2.网关微服务3产品微服务4.订单微服务5.开始测试单点登录 一.什么是单点登录&#xff1f; 单点登录&#xff08;Single Sign On&…

【YOLO目标检测车牌数据集】共10000张、已标注txt格式、有训练好的yolov5的模型

目录 说明图片示例 说明 数据集格式&#xff1a;YOLO格式 图片数量&#xff1a;10000&#xff08;2000张绿牌、8000张蓝牌&#xff09; 标注数量(txt文件个数)&#xff1a;10000 标注类别数&#xff1a;1 标注类别名称&#xff1a;licence 数据集下载&#xff1a;车牌数据…

小程序-生命周期与WXS脚本

生命周期 什么是生命周期 生命周期&#xff08;Life Cycle&#xff09;是指一个对象从创建 -> 运行 -> 销毁的整个阶段&#xff0c;强调的是一个时间段。 我们可以把每个小程序运行的过程&#xff0c;也概括为生命周期&#xff1a; 小程序的启动&#xff0c;表示生命…

ant design vue中带勾选表格报Tree missing follow keys: ‘undefined‘解决方法

1、这里一定要给columns和data-source设置key即可。 <div><a-table:row-selection"rowSelection":dataSource"tableList":columns"columns":scroll"{ x: 100% }":pagination"false":loading"loading"&g…

配置STM32F103的高级定时器TIM1用于PWM功能

配置STM32F103的高级定时器TIM1用于PWM功能 之前在使用stm32f103的PA9引脚复用为高级定时器TIM1_CH2&#xff0c;用它来输出PWM波时发现无法正常输出PWM波形。出现这种问题的情况一般是将PA9先初始化成了串口&#xff0c;然后又配置成PWM功能&#xff0c;这样会导致无法输出PW…

RestSharp简介

RestSharp是一个轻量级HTTP客户端库&#xff0c;主要功能是通过HTTP对远程资源进行同步异步调用&#xff0c;可将请求主体序列化为JSON或XML并反序列化相应。 请求主体的方式&#xff1a;JSON、XML和表单数据 参数类型&#xff1a;查询、URL段、标头、cookie、正文 官方的例…

C++ -- 异常

C中的异常是用于处理程序执行过程中出现的错误情况。通过异常处理&#xff0c;程序可以在遇到错误时优雅地处理这些问题&#xff0c;而不是直接崩溃。 C语言处理错误的方式 C语言传统的处理错误的方式主要有两种&#xff1a; 终止程序&#xff1a;使用如assert这样的宏来检查…

Chromium 如何禁用自动加载指定路径扩展 c++

之前文章提到过浏览器启动会从[HKEY_LOCAL_MACHINE\SOFTWARE\WOW6432Node\Google\Chrome\Extensions\ 注册表下自动搜索需要加载的扩展&#xff0c;那么如何禁用此功能呢&#xff1f; 直接看源码 chrome\browser\extensions\external_registry_loader_win.cc chrome\browser\…

制作 rootfs步骤

1. 准备工作 地平线开发板通过root访问权限&#xff0c; 在开发板中安装所有的依赖库 2. 在开发板创建 rootfs 通过地平线开发板创建一个跟文件系统(rootfs)的方法是通过 chroot 工具将文件系统打包 2.1 挂载必需的文件系统 确保挂载必要的虚拟文件系统&#xff0c;以便正…

隐藏SpringBoot自动生成的文件

第一种方法——删除 第二种方法——Settings——Editor——fail types

做数据抓取工作要如何选择ip池

选择合适的IP池对于数据抓取工作至关重要。一个优质的IP池可以提高抓取的效率和成功率&#xff0c;同时减少被目标网站封禁的风险。以下是选择IP池时需要考虑的一些关键因素&#xff1a; 1. IP类型 住宅IP&#xff1a;住宅IP通常来自真实用户&#xff0c;难以被识别为代理。它…

idea 创建多模块项目

一、新建项目&#xff0c;创建父工程 新建项目&#xff0c;选择 spring initializr 填写相关信息后提交 删除不相关的目录&#xff0c;如下 修改打包方式为 pom&#xff0c;在 pom.xml 文件中新增一行&#xff0c;如下 二、创建子模块 新增子模块 三、修改 pom 文件 修…

2024首届人工智能计量学术大会在合肥成功召开

9月25日至9月26日&#xff0c;由中国计量测试学会主办&#xff0c;北京航天计量测试技术研究所承办的首届人工智能计量学术大会在安徽省合肥市召开。本次大会以“人工智能计量助力新质生产力发展”为主题&#xff0c;汇集人工智能及其计量测试等领域院士、专家和学者&#xff0…

怎样用python+sqlalchemy获得mssql视图对应物理表关系(二)

话不多说 目标:为了实现低代码数据视图对接,有必要得到视图所对应物理表及字段名称,字段类型等 1)约束:视图中用到的物理表不能起别名,所以修改上一篇中存储过程建立语句 USE [agui_conn] GO /****** Object: StoredProcedure [dbo].[sp_GetOrdersByTimestamp] Script D…

云服务升级的兼容性测试

云服务升级后&#xff0c;用户使用的前端版本和升级服务可能存在兼容问题&#xff0c;需要进行兼容性验证。 最复杂的兼容性测试&#xff0c;是对所有支持版本都进行完整回归验证&#xff0c;但这种方式耗时耗力&#xff0c;对大多数公司来说&#xff0c;均不太可行。 从风险…

04 面部表情识别:Pytorch实现表情识别-表情数据集训练代码

总目录&#xff1a;人脸检测与表情分类 https://blog.csdn.net/whiffeyf/category_12793480.html 目录 0 相关资料1 面部表情识数据集2 模型下载3 训练 0 相关资料 面部表情识别2&#xff1a;Pytorch实现表情识别(含表情识别数据集和训练代码)&#xff1a;https://blog.csdn.n…