UEditor踩坑记:解决自动添加<p>标签的方法

发表于 2017-10-25 10:50 | 浏览 2033

UEditor 是百度开发的一款优秀的开源 HTML 编辑器,上手简单,界面美观,功能强大,因此俘获了一大批站长的“芳心”,但是毕竟众口难调,也有一些小问题需要我们自个儿动手解决。

比如昨晚上菲菲君就踩了几枚深坑:

  • 默认代码下,列表样式 <li> 标签下会自动嵌套 <p> 标签
  • 同时父级 <ul> 标签也会自动添加引用 style 和 class 样式
  • 还有自动剔除 css 样式和 span 标签等等很多小问题

这些问题虽然不会严重影响使用,但是有可能造成前台网页的 css 样式丢失和排版错乱,对于菲菲博客这样的强迫症患者显然是无法忍受的,这里记录下来再次遇到就不用再踩坑折腾了。

问题一:<li> 标签内自动添加 <p> 的解决方法

打开 ueditor.all.js 文件,找到 15159 行开始的 utils.each 函数,整体注释掉即可。

查找“进入编辑器的li要套p标签”就能找到

问题二:关于 <ul> 标签自动引用样式的问题

继续在 js 文件中搜索 list-paddingleft-\w+/(15313行),将所在的整行注释掉即可。

查找 15313 行 node.className 开头的代码,注释掉即可

由于 UEditor 主体 JS 代码量庞大,差不多要两万行,修改 ueditor.all.js 后要进行压缩处理再调用替换到线上环境。以上笔记对应为目前最新的 UEditor 1.4.3.3 版本。

这里参考了 CSDN 上的一篇博文 关于UEditor 编辑器自动替换样式的解决方法,其他一些奇奇怪怪的样式问题可以参考。

(原创文章版权所有,如需转载请注明原文链接!)