vue-quill-editor富文本组件返回值居中样式不生效

news2024/11/25 15:20:41

最近项目有用到富文本编辑器,用的是vue-quill-editor富文本组件,但在使用过程中发现个问题:

明明在编辑时已经设置居中,并且详情弹窗的回显也正常居中,但放到其他地方后,返回值的居中就不生效了

问题截图如下

最初的设置样子:

下面是居中不生效的回显:

 经过排查后发现了问题所在:

打开控制台后查看了问题页面的回显样式,class都已经正常返回,但是仔细看会发现,右边的样式栏没有出现ql-align-center这个关键样式的具体内容

居中不生效页面的控制台:

ql-align-center这个样式,从正常生效居中样式的页面打开控制台查看可以知道,这个样式就是控制文字居中的关键所在

居中生效页面的控制台:

经过一番尝试,居然无意间解决了!

解决:

在用于回显的元素上加入样式 class="ql-editor ql-blank" 

//下面这个是用于回显的元素
 <div class="ql-editor ql-blank" v-html="currNavItem.richText" ></div>

有点奇葩,故记录

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2045551.html

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

相关文章

ES高级查询Query DSL查询详解、term术语级别查询、全文检索、highlight高亮

文章目录 ES高级查询Query DSLmatch_all返回源数据_source返回指定条数size分页查询from&size指定字段排序sort 术语级别查询term query术语查询terms query多术语查询range query范围查询exists queryids queryprefix query前缀查询wildcard query通配符查询fuzzy query模…

阿里财报透视:谁在投入?谁在收缩?

8月15日晚&#xff0c;阿里巴巴发布2025财年Q1业绩。由于阿里今年频繁对外表态&#xff0c;所以市场也很关注这份财报能不能反映一点东西。 此前5月的年报电话会&#xff0c;阿里 CFO 徐宏曾说&#xff0c;阿里密切关注ROI。而到了7月&#xff0c;又有媒体报道称阿里内部已达成…

李晨晨的嵌入式学习 DAY27

今天主要学习了线程的两种退出方式以及分离线程和互斥锁 一&#xff0c;进程结束 1.从线程执行函数中return 2.pthread_cancel发送取消请求 3.任何一个函数使用exit或主函数return 二&#xff0c;线程资源的回收 1.pthread_join 主线程关系子线程状态 昨天有提到 2.pthrea…

嵌入式人工智能ESP32(4-PWM呼吸灯)

1、PWM基本原理 PWM&#xff08;Pulse-width modulation&#xff09;是脉冲宽度调制的缩写。脉冲宽度调制是一种模拟信号电平数字编码方法。脉冲宽度调制PWM是通过将有效的电信号分散成离散形式从而来降低电信号所传递的平均功率的一种方式。所以根据面积等效法则&#xff0c;…

【Python机器学习】FP-growth算法——构建FP树

在第二次扫描数据集时会构建一棵FP树。为构建一棵树&#xff0c;需要一个容器来保存树。 创建FP树的数据结构 FP树要比书中其他树更加复杂&#xff0c;因此需要创建一个类来保存树的每一个节点&#xff1a; class treeNode:def __init__(self,nameValue,numOccur,parentNode…

【GLM-4微调实战】GLM-4-9B-Chat模型之Lora微调实战

系列篇章&#x1f4a5; No.文章1【GLM-4部署实战】GLM-4-9B-Chat模型本地部署实践指南2【GLM-4部署实战】GLM-4-9B-Chat模型之对话机器人部署测试3【GLM-4部署实战】GLM-4-9B-Chat模型之vLLM部署推理实践4【GLM-4微调实战】GLM-4-9B-Chat模型之Lora微调实战 目录 系列篇章&…

SpringBoot整合SMS短信服务

SpringBoot整合SMS短信服务 概览pom依赖yml配置配置类service 层interfaceimpl controller层 概览 了解阿里云用户权限操作开通阿里云短信服务添加短信模板添加签名编写测试代码编写可复用的微服务接口&#xff0c;实现验证码的发送 pom依赖 <!--aliyun 短信服务--> &l…

【项目方案】IP地址地理解析方案对比与选型

目前&#xff0c;许多项目在用户发布言论时需要解析其 IP 地址&#xff0c;并且在账号管理中也有查看最近登录地的需求。然而&#xff0c;市面上的相关教程通常缺乏全面性&#xff0c;往往只提供一种简单的方法&#xff0c;导致在技术方案选型时难以进行有效的方案对比。本文旨…

前端工程化-05.Vue项目开发流程

一.Vue项目开发流程 import是导入模块&#xff0c;而export是导出模块 以.vue结尾的为vue组件文件&#xff0c;是我们Vue项目开发时经常操作的组件 <template>&#xff1a;模板部分&#xff0c;由他生成HTML代码 相当于vue当中的视图部分 <script>&#xff1a;…

C++:缺省参数、函数重载、引用

目录 一、缺省参数 二、函数重载 三、引用 3.1 引用的概念和定义 3.2 引用的特征 3.3 引用的使用 3.4 const引用 3.5 指针和引用的关系 一、缺省参数 • 缺省参数是声明或定义函数时为函数的参数指定⼀个缺省值&#xff0c;在调用该函数时&#xff0c;如果没有指定实参…

数据结构预备知识

目录 1. 什么是集合框架 2. 什么是数据结构 3. 容器背后对应的数据结构 4. 相关java知识 5. 时间复杂度 6. 空间复杂度 7. 包装类 7.1 装箱和拆箱 7.2 阿里面试题&#xff1a; 8. 泛型 8.1 泛型的语法 8.2 泛型怎样编译 9. 泛型的上界 9.1 语法 9.2 泛型方法 1.…

网络通信要素

网络介绍 定义&#xff1a;将具有独立功能的多台计算机通过通信线路和通信设备连接起来&#xff0c;在网络管理软件及网络通信协议下&#xff0c;实现资源共享和信息传递的虚拟平台。 学习网络的目的&#xff1a; 能够编写基于网络通信的软件或程序&#xff0c;通常来说就是网…

CentOS7下制作openssl1.1.1i RPM包并升级

OpenSSL最新漏洞 OpenSSL官方发布了拒绝服务漏洞风险通告&#xff0c;漏洞编号为CVE-2020-1971 漏洞详情 OpenSSL是一个开放源代码的软件库包&#xff0c;应用程序可以使用这个包来进行安全通信&#xff0c;避免窃听&#xff0c;同时确认另一端连接者的身份。这个包广泛被应…

爆了,20w点赞!收好这6个可以一键替换视频人物的AI工具!(建议收藏)

用 AI 一键替换视频中人物角色的玩法&#xff0c;彻底被网友们带火了&#xff01; 前有机器人插秧、机器人做饭做家务的视频&#xff0c;后有机器人打乒乓球、美女踢足球的视频。 这类视频动辄几万、几十万点赞&#xff0c;流量也太猛了&#xff01; 图片可能不太直观&#x…

时空自回归模型(STAR)及 Stata 具体操作步骤

目录 一、引言 二、文献综述 三、理论原理 四、实证模型 五、稳健性检验 六、程序代码及解释 附录 数据预处理 生成时空权重矩阵 一、引言 时空自回归模型&#xff08;Spatial-Temporal Autoregressive Model&#xff0c;简称 STAR&#xff09;在分析具有时空特征的数…

Java填充PDF并返回填充后PDF文件及对应base64码

前期准备 下载PDF编辑工具&#xff08;Adobe Acrobat 9 Pro&#xff09;&#xff1a; 可以主页关注小程序【白哥Java】回复【PDF编辑软件】即可获取 或者直接联系博主也可 主页如下&#xff1a; 软件使用流程 此处流程为文本域流程 图片或其他大致相同 生成模板PDF样式如下&…

Linux命令行参数与环境变量

目录 命令行参数与环境变量 命令行参数 环境变量及其相关概念 环境变量的相关操作 环境变量的本质 命令行参数与环境变量 命令行参数 我们在使用一些Linux的一些指令时&#xff0c;会有意或无意的使用一些指令参数&#xff0c;例如&#xff1a; ls -al ps -ajx gcc -o …

CVE-2024-38077 微软 RDP 漏洞修复 报错 不适用于你的计算机 解决方法

这一漏洞存在于Windows远程桌面许可管理服务&#xff08;RDL&#xff09;中&#xff0c;该服务被广泛部署于开启Windows远程桌面&#xff08;3389端口&#xff09;的服务器&#xff0c;用于管理远程桌面连接许可&#xff0c;也有文章认为该漏洞实际利用的是135端口。攻击者无需…

【大模型】多模态的原理简述

多模态的原理 多模态模型目前基本就是文生图、图生图、图生视频、文生视频这些&#xff0c;其底层逻辑其实还是先从生图片这一源头。因为毕竟视频也是若干帧的图片组成。 所以在生图片的这个环节上&#xff0c;我们把比较火的这个stablediffusion用的这个diffusion扩散模型理…

企业大数据治理管理平台解决方案(33页PPT)

方案介绍&#xff1a; 本解决方案旨在为企业提供一套从数据采集、存储、处理、分析到应用的全链条大数据治理管理平台。该平台通过集成先进的数据技术和管理理念&#xff0c;帮助企业实现数据的全生命周期管理&#xff0c;提升数据质量&#xff0c;降低数据风险&#xff0c;促…