百度ueditor编辑器在html编辑模式代码会混乱

扫描下面的二维码，“关注”我的头条号，我会每天更新免费视频课程。

前面的文章我们介绍了thinkphp整合ueditor百度编辑器——thinkphp3.2.3如何集成ueditor百度编辑器? 百度安装和使用还是比较方便实用的。但是，最近碰到一个奇怪的问题：在使用ueditor编辑的html按钮进行html代码编辑模式时，代码出现不正常，非常乱，无从下手进行编辑，如下图：

本想百度一下这种情况有没有碰到，可百度了一圈，没有相似的问题存在，这可能是我这边使用编辑器时出现什么bug造成的原因，只好自己慢慢找问题。最有效的方式就是通过审查工具来查看问题。

打开页面的审查工具，最终发现一个现象，ueditor对输入框中的html标签进行重新编辑，在<p>标签外层包裹了<pre><span>2个标签，如下图：

而我对当前页面中的span标签做了css样式添加（如上图），这样就对ueditor编辑器中的span标签产生了影响，因为ueditor编辑器是放在 .main li标签里的。于是，在CSS样式中重新定义这个ueditor编辑器中的span样式，问题解决了，效果如下图：

还以为是ueditor编辑器的问题呢，原来是我模板中的CSS样式与ueditor编辑器中的样式发生冲突。