UEditor样式被过滤无法显示的解决方法

百度开源的富文本编辑器----UEditor.不得不说这个富文本编辑器做的真的很赞，个人觉得比CKeditor要好用很多，效果也很不错。

但是在使用的过程中，有遇到在向文本编辑器插入HTML文本时，添加的样式老是被过滤掉，找了很多的资料，并结合最新的版本，整理了下如何解决样式过滤的方法。

我们在富文本编辑页点击HTML小图标，切换到HTML模式，然后在该模式下加入如下HTML：

<style type="text/css">
.bg{ background:lightbule;}
</style>
<div class="bg">
Hello EveryBody Welcome To UEditor World!
</div>

以上的html意思很简单，就是为div加了一个名为bg 的样式，

然后我们再点击HTML图标，转换到预览页，可以看到我们的div的背景色并没有任何的变化，而且我们在div之前写的样式，也没有被渲染，

反而是以文本的形式显示了出来。

F12查看整个页面，发现我们之前写的样式和标签都被渲染成如下的html：

<div style="display: none;" cdata_tag="style" type="text/css">
<p>
Hello EveryBody Welcome To UEditor World!
</p>

由以上代码可以看出，我们的style标签被转换成了div，并且设置样式为不可见，我们的div标签被转换成了p标签。

这说明编辑器本身自己做了一个转换，类似于一个过滤吧，可能是为了出于安全性考虑，防止用户在前段输入非法的代码、脚本等，事实上我觉得这有点多此一举，

既然都让富文本编辑了，不能写html脚本，还叫什么富文本。

然后我们再点击HTML图标，看看HTML试图，内容如下：

<style type="text/css">.bg{ background:lightbule;}</style>
<p>
Hello EveryBody Welcome To UEditor World!
</p>

结合以上分析得出，该编辑器内部过滤机制是将style标记转换为div，而将div等标签以p替代。如何解决呢？

之前有在网上查过相关的资料，都说是在配置文件里有一个黑白名单，然后就在配置文件里找了下，在最新版本的脚本文件里怎么找也没找到那个所谓的黑白名单，

当然了，没有黑白名单也照样可以解决问题的。

首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码，将true设置为false

me.setOpt('allowDivTransToP',false);

//默认的过滤处理

//进入编辑器的内容处理

然后再接着下边的addInputRule方法中将switch代码段中的case style,script都给注释或者删掉。

me.addInputRule(function (root) {

var allowDivTransToP = this.options.allowDivTransToP;

var val;

//进行默认的处理

root.traversal(function (node) {

if (node.type == 'element') {

if (!dtd.$cdata[node.tagName] && me.options.autoClearEmptyNode && dtd.$inline[node.tagName] && !dtd.$empty[node.tagName] && (!node.attrs || utils.isEmptyObject(node.attrs))) {

if (!node.firstChild()) node.parentNode.removeChild(node);

else if (node.tagName == 'span' && (!node.attrs || utils.isEmptyObject(node.attrs))) {

node.parentNode.removeChild(node, true)

}

return;

}

//删除switch下的case style 和script

switch (node.tagName) {

case 'a':

if (val = node.getAttr('href')) {

node.setAttr('_href', val)

}

break;

完成以上操作之后，保存即可。再次插入html时，样式就可以显示了。

解释一下以上操作的意义。

第一步将allowDivTransToP设置为false是因为默认的设置是将div自动转换为p，这样写好的样式就找不到相应的div

了，所以才渲染不上的。

第二步将addInputRule函数中的switch 代码段中的case style ，script选择给删除或者注释，是为了避免出现编辑器将style或script自动的转换成别的标签。

好了，大家可以试一试，看看效果。

完成以上操作之后，保存即可。再次插入html时，样式就可以显示了。

解释一下以上操作的意义。

第一步将allowDivTransToP设置为false是因为默认的设置是将div自动转换为p，这样写好的样式就找不到相应的div

了，所以才渲染不上的。

第二步将addInputRule函数中的switch 代码段中的case style ，script选择给删除或者注释，是为了避免出现编辑器将style或script自动的转换成别的标签。

好了，大家可以试一试，看看效果。

2.JQuery.attr()与JQuery.css()的区别

之前一直没太区分attr()与css,今天好好看了下，css和attr作用的范围不同，css主要是用来设置样式的，也就是style内的东西，而attr主要是用来设置属性的，比如元素的title，name、style等这些都可以称之为属性，举例说明

<input  id="btn"  type="button" value="确定” />

我们可以用$("#btn").css("background","green");为该按钮设置一个背景色，

而如果我们这样写$("#btn").attr("background","green");不但按钮的背景色不会发生变化，相反该按钮在页面渲染之后又多了一个background的属性，请注意，这里是属性，而不是style里边的background，页面的渲染如下：

<input  id="btn"  type="button" value="确定”  background="green" />

今天就总结到这里了，主要是为了总结Ueditor样式过滤的问题，希望能给大家带来帮助。