- 加入我的QQ群
- 关注我的百家号
扫描下面的二维码,“关注”我的百家号。
前面的文章我们介绍了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编辑器中的样式发生冲突。
alert()