vue-ueditor-wrap设置autoHeightEnabled:true无效问题

news2024/11/15 13:55:58

问题描述

今天小伙伴遇到一个问题,使用vue-ueditor-wrap富文本编辑器,发现设置autoHeightEnabled为true后,对于某些文章,编辑器的高度依然没有按照实际的文章内容高度进行变化:

在这里插入图片描述
在这里插入图片描述

问题排查

通过调试代码发现是文章html内容最后存在一个“特别的”节点:

<p style="display: none;">
    <mp-style-type data-value="3"></mp-style-type>
</p>

它会使编辑器对内容的高度计算出现问题:

在这里插入图片描述
通过代码可以发现,编辑器是获取body下的最后一个节点参与高度计算:domUtils.getXY(t).y + t.offsetHeight。而意外的最后一个节点是隐藏的,导致计算偏差,从而计算得到编辑器默认的240高度。

解决方案

1.对内容进行包裹:在内容最外层包裹一层<div>(注意,不要使用<p>标签进行包裹)

2.移除最后的隐藏节点,确保最后一个节点不是隐藏节点

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

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

相关文章

C语言实现经典排序算法

1.排序的概念及其运用 1.1排序的概念 排序&#xff1a;所谓排序&#xff0c;就是使一串记录&#xff0c;按照其中的某个或某些关键字的大小&#xff0c;递增或递减的排列起来的操作。 稳定性&#xff1a;假定在待排序的记录序列中&#xff0c;存在多个具有相同的关键字的记…

SAP BW/BPC:实现自动执行BPC跑包程序

作者 idan lian 如需转载备注出处 如果对你有帮助&#xff0c;请点赞收藏~~~ 用途&#xff1a;创建程序&#xff0c;跑BPC包&#xff0c;把数据从BW应用层跑到BPC,程序可放到处理链或自动作业中&#xff0c;实现定时跑包。 1.步骤 首先需要BPC顾问创建一个他们手动执行的包…

数据挖掘之分类算法

分类算法是数据挖掘中常用的一类算法&#xff0c;其主要任务是根据已知的训练数据&#xff08;即带有标签的数据&#xff09;构建模型&#xff0c;然后利用该模型对新的数据进行分类。分类算法广泛应用于金融、医疗、市场营销等领域&#xff0c;用于预测、决策支持等任务。以下…

并查集【算法 12】

并查集 (Union-Find) 的基础概念与实现 并查集&#xff08;Union-Find&#xff09;是一种用于处理不相交集合&#xff08;disjoint sets&#xff09;的数据结构&#xff0c;常用于解决连通性问题。典型的应用场景包括动态连通性问题&#xff08;如网络节点连通性检测&#xff0…

数据库sqlite3

数据库 数组、链表、变量 ----->内存&#xff1a;程序运行结束&#xff0c;掉电数据丢失 文件 ----------------------->硬盘&#xff1a;程序运行结束&#xff0c;掉电数据不丢失 数据库&#xff1a;专业存储数据、大量数据 ----->硬盘 常用数据库&#xff1a; …

linux 如何查看cpu核心数量

在Linux系统中&#xff0c;有多种方法可以查看CPU的核心数量。 一、lscpu lscpu命令是最直接的方法之一&#xff0c;它可以显示CPU架构信息&#xff0c;包括CPU数量、每个CPU的核心数、每个核心的线程数等。要查看CPU核心数量&#xff0c;可以直接查看lscpu命令输出的Core(s) …

力扣面试150 删除排序链表中的重复元素 II 哑兵 双指针

Problem: 82. 删除排序链表中的重复元素 II &#x1f468;‍&#x1f3eb; 灵神题解 Code /*** Definition for singly-linked list.* public class ListNode {* int val;* ListNode next;* ListNode() {}* ListNode(int val) { this.val val; }* List…

企业车辆|基于SprinBoot+vue的企业车辆管理系统(源码+数据库+文档)

企业车辆管理系统 基于SprinBootvue的企业车辆管理系统 一、前言 二、系统设计 三、系统功能设计 系统功能实现 后台模块实现 管理员模块实现 驾驶员模块实现 四、数据库设计 五、核心代码 六、论文参考 七、最新计算机毕设选题推荐 八、源码获取&#xff1a; 博主…

悬浮翻译软件有哪些?试试这些利器

在观看外国电影或电视剧的奇幻旅程中&#xff0c;面对字幕如流星般划过屏幕&#xff0c;是否渴望能即时捕捉每一个细微的情感涟漪与幽默火花&#xff0c;让体验更加完整无憾&#xff1f; 此刻&#xff0c;无需再为语言障碍而烦恼&#xff01;悬浮翻译器电脑版作为你贴心的跨文…

新买的笔记本只有一个C盘,进行磁盘分区的操作

开始是这样的: 快捷键 window x 找到磁盘管理 102,400M 100GB 然后右键重命名磁盘名字 最终得到结果如下:

SpringBoot+Vue的AI智能图书馆系统来袭!!

SpringBootVue的AI智能图书馆系统来袭&#xff01;&#xff01; 一、项目介绍用户&#xff08;借阅人&#xff09;图书管理员系统管理员 二、相关技术栈三、项目演示管理员登录用户登录 四、相关地址总结 大家好&#xff0c;这里是程序猿代码之路。在数字化时代的浪潮中&#x…

Python办公自动化 获取文本数据 支持多种类型文件

学好办公自动化,走遍天下都不怕&#xff01;&#xff01; 前面我们已经学习了&#xff0c;如何用python的下载安装以及入门基础知识&#xff0c;并且也知道如何使用python自动处理Excel文件数据、如何批量生成Word文件、如何对数据分析后生成洞察报告、如何用python实现自动发送…

【自由能系列(初级)】自由能原理——神经科学的“能量守恒”方程

【通俗理解】自由能原理——神经科学的“能量守恒”方程 关键词提炼 #自由能原理 #KL散度 #生成模型 #识别密度 #观测数据 #神经科学 第一节&#xff1a;自由能原理的类比与核心概念 1.1 自由能原理的类比 自由能原理在神经科学中的应用&#xff0c;可以类比为一个“大脑的…

Java 面试题:HTTP版本演变--xunznux

文章目录 HTTP版本演变HTTP/0.9HTTP/1.0HTTP/1.1新引入&#xff1a;问题&#xff1a;长连接是什么&#xff1a;管道网络传输&#xff1a;队头阻塞是什么&#xff1f;解决http队头阻塞的方法&#xff1a;HTTP1.1常见性能问题为解决HTTP1.1性能问题而提出的常见优化手段 HTTP/21、…

数据库(专业存储数据)

数组、链表、变量----->内存&#xff1a;程序运行结束&#xff0c;数据丢失 文件-------------->硬盘 数据库&#xff1a;专业存储数据&#xff0c;大量数据----------->硬盘 一、数据库文件与普通文件区别: 1.普通文件对数据管理(增刪改查)效率低 2.数据库对数据…

UNI-APP 打包构建 APK

UNI-APP 打包构建 APK 前言一、WINDOWS&#xff08;在线 - 纯命令版&#xff09;依赖其他前置准备实现原理操作步骤 二、WINDOWS&#xff08;离线 - Android Studio 版&#xff09;依赖&#xff08;首次构建需要联网安装依赖&#xff09;其他前置准备实现原理操作步骤 三、WIND…

【QT】学习笔记:处理数据库 SQLite

在 Qt 中使用 SQLite 数据库非常简单&#xff0c;Qt 提供了 QSqlDatabase 和 QSqlQuery 类来处理数据库的连接、查询、插入、更新和删除等操作。下面是一个示例程序&#xff0c;展示如何在 Qt 中使用 SQLite 数据库。 示例代码 1. 项目配置 首先&#xff0c;确保在项目的 .p…

李宏毅 机器学习与深度学习【2022版】 03

文章目录 一、卷积神经网络CNN二、使用验证集&#xff0c;模型还过拟合的原因三、深度学习的优点四、Spatial Transformer Layer 一、卷积神经网络CNN CNN在影像识别中&#xff0c;表现比较好。 每个感受野 receptive field 都有一个神经元去探测鸟嘴&#xff0c;是没有没要的…

Vue(三)内置指令v-text、html、cloak、once、pre;自定义指令的三种方式、Vue生命周期

文章目录 1. 内置指令1.1 v-text、v-html指令1.2 v-cloak指令1.3 v-once指令1.4 v-pre指令 2. 自定义指令(directives)2.1 函数式2.2 对象式2.3 注意点 3. 生命周期3.1 挂载流程3.2 更新流程3.3 销毁流程 1. 内置指令 1.1 v-text、v-html指令 v-text与v-html都是向所在的节点…

0. Spring 的 控制反转和依赖注入

提起Spring&#xff0c;很多人第一反应就是IOC和AOP。那IOC到底是什么东东&#xff1f; IOC&#xff08;Inversion of Control) 翻译过来叫控制反转。DI&#xff08;Dependency Injection&#xff09;翻译过来叫依赖注入。这时候就应该掏出我们的人生三问了。 控制反转用人话说…