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

  • 13
    点赞
  • 9
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

晓风伴月

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值