互联网知识

精准传达 • 价值共享

洞悉互联网前沿资讯,探寻网站营销规律

查看其它板块

解决百度编辑器自动添加<p>标签的方法

作者:菲菲博客 | 2019-12-27 21:15 |点击:

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 编辑器自动替换样式的解决方法,其他一些奇奇怪怪的样式问题可以参考。

文章转载:https://www.feifeiboke.com/website/3723.html

多一份免费策划方案,总有益处。

请直接添加技术总监微信联系咨询

网站设计 品牌营销

多一份参考,总有益处

联系狐灵科技,免费获得专属《策划方案》及报价

咨询相关问题或预约面谈,可以通过以下方式与我们联系

业务热线:023-68168040 / 大客户专线:15523356218