ueditor引用parse.js后bootstrap页面CSS冲突问题

标签: Ueditor Bootstrap
编辑:攻城狮 转载自 2017-04-22 评论 0  |  阅读2393 views 收藏 0

Ueditor作为一款国内的轻量级的富文本编辑器,凭借着百度的品牌和本土化的优势,已被广大开发者所接受。但在项目中整合的问题也是存在的。

首先,Ueditor官方推荐使用ueditor.parse.js来渲染编辑的内容。

ueditor.png

大家使用 UEditor 是为了让用户能在页面中编辑富文本内容,但这应该只是手段方法。我们最终的目的是为了呈现用户编辑的内容。也就是内容的展示。原来我们对这块是不考虑的,只关注在编辑端。但随着编辑器产出内容的增加和复杂化,比如图表展示,代码高亮,自定义的列表标号等等,如果都在最终产出的编辑数据中处理,那势必会导致产出数据带有冗余内容,而且也很大程度上硬编码了展示时定制效果。基于这些问题,uparse产生了。

uparse的作用

它会根据内容展示内容,动态的在你的展示页中加入css代码,比如你的编辑数据中有表格,那就会加入一些表格的css样式,如果有图表数据,会调用相关的js插件,解析数据成为图表等。

SO,当页面加载ueditor.parse.js并调用uParse这个函数,会根据渲染的类型在head里添加添加一下类似的代码:

<style id="list">
.a-info-p ol,.a-info-p ul{margin:0;padding:0;}li{clear:both;}.a-info-p .list-paddingleft-1{padding-left:0}
.a-info-p .list-paddingleft-2{padding-left:20px}
.a-info-p .list-paddingleft-3{padding-left:40px}
.a-info-p ol,.a-info-p ul{margin:0;padding:0;}li{clear:both;}.a-info-p .list-paddingleft-1{padding-left:0}
.a-info-p .list-paddingleft-2{padding-left:20px}
.a-info-p .list-paddingleft-3{padding-left:40px}
</style>

请注意这个:li {clear:both;}看出问题了吧,因为这段代码在head中,所以li标签的特殊性太高了,对bootstrap框架的一些基本样式进行了覆盖,从而导致了样式的失控。

可能是我的Ueditor版本太低了,不知道高版本的Ueditor怎么样。

解决方法:

  • 自己调用Ueditor下的第三方库自己进行渲染。

  • 根据具体情况在需要的地方进行CSS规则的重写(覆盖)。

上一篇: Linux shell 中如何使用 ftp 命令
下一篇: MIP、PWA、WebGL、HTTPS,来看Web生态的领先技术

发表评论愿您的每句评论,都能给大家的生活添色彩,带来共鸣,带来思索,带来快乐。

Andnot.cn 注册

评论 [0]

  • 快来做第一个评论的人吧!