UEditor在编辑对齐方式时产生额外空行问题

一、问题描述

一个关于UEditor富文本编辑器的问题:在编辑内容对齐方式后保存后浏览器显示的段落上下会比原先多出一些间距。

下面是对齐编辑后,未保存前的的HTML:
在这里插入图片描述
保存后,实际会多出一个段落空行:

在这里插入图片描述

二、问题调查

经过排查,确定保存时的HTML内容没有被修改,查询内容的时候也是与保存时一致,也就是没有多出段落空行。
仔细观察,保存前的HTML结构:

在这里插入图片描述
再观察实际Chrome中的渲染结构:
在这里插入图片描述
两者是不一样的。之所以会这样,是HTML嵌套的规则规定<p>标签是不能嵌套自身的。如果嵌套自身,则浏览器就会像上面那样处理,前后多出两个段落空行。

三、解决方案:

修改UEditor源码:

(1)打开ueditor.all.js(或ueditor.all.min.js):

搜索allowDivTransToP,修改成false。即:allowDivTransToP: false

(2)再搜索domUtils.isEmptyNode(me.body)并修改以下:

//编辑器不能为空内容
if (domUtils.isEmptyNode(me.body)) {me.body.innerHTML = '';
}

(3)搜索“给文本或者inline节点套p标签”,并且替换为以下内容:

//给文本或者inline节点套p标签
if (me.options.enterTag == 'p') {var child = this.body.firstChild, tmpNode;if (!child || child.nodeType == 1 &&(dtd.$cdata[child.tagName] || isCdataDiv(child) ||domUtils.isCustomeNode(child))&& child === this.body.lastChild) {this.body.innerHTML = '' + this.body.innerHTML;} else {var p = me.document.createElement('div');while (child) {while (child && (child.nodeType == 3 || child.nodeType == 1 && dtd.p[child.tagName] && !dtd.$cdata[child.tagName])) {tmpNode = child.nextSibling;p.appendChild(child);child = tmpNode;}if (p.firstChild) {if (!child) {me.body.appendChild(p);break;} else {child.parentNode.insertBefore(p, child);p = me.document.createElement('div');}}child = child.nextSibling;}}
}

(4)搜索UE.plugins['justify'],找到其中的var p = range.document.createElement('p')修改成:

var p = range.document.createElement('div'); 

附件:可参考文中附件ueditor.all.js

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

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

相关文章

案例102:基于微信小程序的旅游社交管理系统设计与实现

文末获取源码 开发语言&#xff1a;Java 框架&#xff1a;SSM JDK版本&#xff1a;JDK1.8 数据库&#xff1a;mysql 5.7 开发软件&#xff1a;eclipse/myeclipse/idea Maven包&#xff1a;Maven3.5.4 小程序框架&#xff1a;uniapp 小程序开发软件&#xff1a;HBuilder X 小程序…

北京交通大学高性能作业——多类积分函数华为鲲鹏 CPU 与 CPU + GPU 对比

多类积分函数华为鲲鹏 CPU 与 CPU GPU 对比 1.description of the problem you have chosen2.description of the HUAWEI platform you use (including both software and hardware)3.your algorithm flow chart直接计算流程图OpenMP计算流程图CUDA计算流程图 4.analysis of t…

Java学习,一文掌握Java之SpringBoot框架学习文集(5)

&#x1f3c6;作者简介&#xff0c;普修罗双战士&#xff0c;一直追求不断学习和成长&#xff0c;在技术的道路上持续探索和实践。 &#x1f3c6;多年互联网行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &#x1f389;欢迎 &#x1f44d;点赞✍评论…

Java设计模式-模板方法模式

目录 一、豆浆制作问题 二、模板方法模式基本介绍 三、原理类图 四、模板方法模式解决豆浆制作问题 五、模板方法模式的钩子方法 六、模板方法模式在Spring框架应用的源码分析 七、注意事项和细节 一、豆浆制作问题 编写制作豆浆的程序&#xff0c;说明如下 : 1) 制作…

【Docker基础三】Docker安装Redis

下载镜像 根据自己需要下载指定版本镜像&#xff0c;所有版本看这&#xff1a;Index of /releases/ (redis.io) 或 https://hub.docker.com/_/redis # 下载指定版本redis镜像 docker pull redis:7.2.0 # 查看镜像是否下载成功 docker images 创建挂载目录 # 宿主机上创建挂…

swing快速入门(四十)JList、JComboBox实现列表框

注释很详细&#xff0c;直接上代码 新增内容 &#x1f9e7;1.列表的属性设置与选项监听器 &#x1f9e7;2.下拉框的属性设置与选项监听器 &#x1f9e7;3.Box中组件填充情况不符合预期的处理方法 &#x1f9e7;4.LIst向Vector的转化方法 源码&#xff1a; package swing31_40;i…

ReentrantLock底层原理学习一

J.U.C 简介 Java.util.concurrent 是在并发编程中比较常用的工具类&#xff0c;里面包含很多用来在并发场景中使用的组件。比如线程池、阻塞队列、计时器、同步器、并发集合等等。并发包的作者是大名鼎鼎的 Doug Lea。我们在接下来的课程中&#xff0c;回去剖析一些经典的比较…

【数据结构】二叉树的创建和遍历:前序遍历,中序遍历,后序遍历,层次遍历

目录 一、二叉树的定义 1、二叉树的定义 2、二叉树的五种形态 二叉树的子树 &#xff1a; 3、满二叉树与完全二叉树 4、二叉树的性质 5、二叉树的存储结构 1、顺序存储 ​编辑 2、链式存储 二、二叉树的遍历 按照前序序列构建二叉树 1、前 (先) 序遍历(Preorder …

axure rp9添加当前日期、表单添加到中继器

1.[[Now.toLocaleDateString()]] [[Now.toLocaleTimeString()]]当前日期&#xff1a;2024/1/6 13:19:47 2. 输入内容添加到表单&#xff1b; 3.中继器的序号显示&#xff1b; 4. 中继器中添加按钮以及其他的&#xff1b;在中继器中添加动态面板&#xff0c;放入需要添加的按…

计数器的LED显示控制电路图

如图所示&#xff0c;图a中采用十进制七段存储-译码-驱动单元74143,此单元对所有段都有恒流输出。在电压为5V时每段电流约为15~22mA.七段译码器的BCD数据可以由脚17~20上取出。脚22用于进位&#xff0c;即当计数值到9后就为低电平&#xff0c;其余为高电平。利用这个信号可以控…

mysql视图和sql语句

mysql视图和sql语句 一.mysql视图1.数据的虚拟表示&#xff1a;2.简化复杂查询&#xff1a;3.安全性和权限控制&#xff1a;4.逻辑数据组织&#xff1a;5.更新限制&#xff1a;6.视图的创建&#xff1a; 二.mysq语句使用案列 MySQL的视图&#xff08;View&#xff09;是一个虚拟…

图神经网络|5.消息传递的计算方法 6.多层GNN的作用

5.消息传递的计算方法 边的存放方式 注意&#xff0c;在实际的边的实现方式中&#xff0c;并不是以邻接矩阵来进行实现的&#xff0c;这是因为在图的更新中&#xff0c;用邻接矩阵进行更新所占用的时间开销相对大&#xff0c;二是因为领接矩阵占用的空间大&#xff08;N方&am…