pre 里面的有文字的样式 可能会被过滤掉 在 ueditor.all.js 里面搜 'pre' 然后作相应的处理

搜 '\r\n' '\r' '\n' 作相应的处理

上周开发中有用到开源的富文本编辑器UEditor，在使用的过程中遇到了样式被过滤无法显示问题，经过一番折腾终解决，此外，还有一些关于获取前台界面元素的一些总结。

1. UEditor样式被过滤无法显示问题
         上周有用到百度开源的富文本编辑器----UEditor.不得不说这个富文本编辑器做的真的很赞，个人觉得比CKeditor要好用很多，效果也很不错。
但是在使用的过程中，有遇到在向文本编辑器插入HTML文本时，添加的样式老是被过滤掉，找了很多的资料，并结合最新的版本，整理了下如何解决样式过滤的方法。
我们在富文本编辑页点击HTML小图标，切换到HTML模式，然后在该模式下加入如下HTML：

以上的html意思很简单，就是为div加了一个名为bg 的样式，
然后我们再点击HTML图标，转换到预览页，可以看到我们的div的背景色并没有任何的变化，而且我们在div之前写的样式，也没有被渲染，
反而是以文本的形式显示了出来。
F12查看整个页面，发现我们之前写的样式和标签都被渲染成如下的html：

由以上代码可以看出，我们的style标签被转换成了div，并且设置样式为不可见，我们的div标签被转换成了p标签。
这说明编辑器本身自己做了一个转换，类似于一个过滤吧，可能是为了出于安全性考虑，防止用户在前段输入非法的代码、脚本等，事实上我觉得这有点多此一举，
既然都让富文本编辑了，不能写html脚本，还叫什么富文本。
然后我们再点击HTML图标，看看HTML试图，内容如下：

结合以上分析得出，该编辑器内部过滤机制是将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自动的转换成别的标签。
好了，大家可以试一试，看看效果。

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样式过滤的问题，希望能给大家带来帮助。

来自  http://blog.csdn.net/forest_fire/article/details/50968789

百度编辑器ueditor修改，去掉自动替换html标签

百度的Ueditor编辑器出于安全性考虑，用户在html模式下粘贴进去的html文档会自动被去除样式和转义。虽然安全的，但是非常不方便。做一下修改把这个功能去掉。

一、打开ueditor.all.js

在ueditor.all.js中找到
UE.plugins['defaultfilter'] = function ()

如下图所示：

二、ueditor.all.min.js 中也一样，格式是：

UE.plugins.defaultfilter=function()

如下图所示：

PS:以上版本修改基于1.4.3.3版本。新版本位置可能有变动或者已经解决此问题。

来自  http://www.bomiw.com/news/useknowledge-291.html

百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

如图，红框为回车键和shift+回车 ：

   ===>> 

 ueditor.all.js中: 

1:

搜索修改成false：allowDivTransToP: false

再搜索并修改以下：

//编辑器不能为空内容

if (domUtils.isEmptyNode(me.body)) {
    me.body.innerHTML = '<div>' + (browser.ie ? '' : '<br/>') + '</div>';
}

 

2:

//给文本或者inline节点套p标签
            if (me.options.enterTag == 'p') {

                var child = this.body.firstChild, tmpNode;
                if (!child || child.nodeType == 1 &&
                    (dtd.$cdata[child.tagName] || isCdataDiv(child) ||
                        domUtils.isCustomeNode(child)
                        )
                    && child === this.body.lastChild) {
                    this.body.innerHTML = '<div>' + (browser.ie ? '&nbsp;' : '<br/>') + '</div>' + this.body.innerHTML;

                } else {
                    var p = me.document.createElement('div');
                    while (child) {
                        while (child && (child.nodeType == 3 || child.nodeType == 1 && dtd.p[child.tagName] && !dtd.$cdata[child.tagName])) {
                            tmpNode = child.nextSibling;
                            p.appendChild(child);
                            child = tmpNode;
                        }
                        if (p.firstChild) {
                            if (!child) {
                                me.body.appendChild(p);
                                break;
                            } else {
                                child.parentNode.insertBefore(p, child);
                                p = me.document.createElement('div');
                            }
                        }
                        child = child.nextSibling;
                    }
                }
            }

 以上类似的有好几处，将p 改为 div

3：

上代码框中 if (me.options.enterTag == 'p') 这个P根据以下开关来走

enterTag: 'p',//改后为回车换行增加br，不改为换行增加div

 4：

//进入编辑器的li要套p标签，我不需要套P，注释掉吧

//进入编辑器的li要套p标签
    /*这里开始注释掉 me.addInputRule(function(root){
        utils.each(root.getNodesByTagName('li'),function(li){
            var tmpP = UE.uNode.createElement('p');
            for(var i= 0,ci;ci=li.children[i];){
                if(ci.type == 'text' || dtd.p[ci.tagName]){

 

5：以下找到并注释

//注释掉，这个是自动给ul增加一个内置的样式，如<ul class=" list-paddingleft-2">
node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,)) +  + type;

 

//往下隔一行的这个注释掉，这个是自动去除粘贴进去的代码的li的style样式，为何清除我的样式？
li.style.cssText && (li.style.cssText = );

 

 

参考：http://blog.csdn.net/wdw984/article/details/22375199?utm_source=tuicool&utm_medium=referral

来自  https://www.cnblogs.com/xiangsj/p/6026533.html

去掉百度编辑器ueditor自动生成的p标签 30

我知道很繁琐，只是不知道有没有人去解决过，在百度没有搜到答案，求大神解答。去掉自动添加的P BR 标签

zlj392090057 | 浏览 30195 次 |举报

我有更好的答案

推荐于2017-10-14 16:07:23最佳答案

百度的Ueditor编辑器出于安全xìng考虑，用户在html模式下粘贴进去的html文档会自动被去除样式和。虽然安全的，但是非常不方便。 
做一下修改把这个功能去掉。 
一、打开ueditor.all.js 
二、大概9300行找到 ///plugin 编辑器默认的过滤转换机制，把下面的
'allowDivTransToP':true

值改成false。为true的时候会自动把div转成p。 
三、大概9429行，有个case 'li'，这个是把li里面的样式去掉，把这个case注释掉。 
四、大概14058行，下面的第一个utils.each功能注释掉，这个是自动给li里面的内容增加一个p。 
五、大概14220行，
node.className = utils.trim(node.className.replace(/list-paddingleft-\w+/,'')) + ' list-paddingleft-' + type;

注释掉，这个是自动给ul增加一个内置的样式。 
下面的14222行
li.style.cssText && (li.style.cssText = '');

注释掉，这个是自动去除粘贴进去的代码的li的style样式 
  
至此，我们粘贴进去的html格式的ul和li就不会被了。

来自 https://zhidao.baidu.com/question/583301483289155525.html

百度UEditor富文本编辑器去除过滤div等标签

将设计排版好的页面html代码上传到数据库，再读取出来的时候发现所有的div都被替换成了p标签。

解决方法:

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

 me.setOpt({
        'allowDivTransToP':false,
        'disabledTableInTable':true
    });

然后在ueditor.config.js文件内搜索allowDivTransToP,找到如下的代码，将注释去掉并且改为false

        //默认过滤规则相关配置项目
        //,disabledTableInTable:true  //禁止表格嵌套
        ,allowDivTransToP:false      //允许进入编辑器的div标签自动变成p标签
        //,rgb2Hex:true               //默认产出的数据中的color自动从rgb格式变成16进制格式

来自 http://www.cnblogs.com/renhongwei/p/6141385.html

百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

百度编辑器 ueditor 内容编辑自动套P标签，及p标签 替换

如图，红框为回车键和shift+回车 ：

   ===>> 

ueditor.all.js中:

1:

搜索修改成false：allowDivTransToP: false
再搜索并修改以下：

2:

以上类似的有好几处，将p 改为 div

3：

上代码框中 if (me.options.enterTag == 'p') 这个P根据以下开关来走
enterTag: 'p',//改后为回车换行增加br，不改为换行增加div
4：

//进入编辑器的li要套p标签，我不需要套P，注释掉吧

5：以下找到并注释

到此就

来自 http://www.jb51.net/article/109897.htm