解决UEditor样式被过滤问题实战

た入场券 2022-05-20 05:22 214阅读 0赞

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

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

<table style="border-spacing:0px;border-width:1px;border-style:solid;border-color:rgb(192,192,192);background:transparent none repeat scroll 0% 0%;font-size:12px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
 <tbody style="background:transparent none repeat scroll 0% 0%;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
  <tr style="border-top:0px;background:transparent none repeat scroll 0% 0%;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
   <td style="border-color:rgb(192,192,192);background:transparent none repeat scroll 0% 0%;border-collapse:collapse;font-size:12px;color:rgb(175,175,175);line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;min-height:auto;"> 
    <div style="border-right:2px solid rgb(108,226,108);background:rgb(244,244,244);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      1 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      2 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);background:rgb(244,244,244);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      3 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      4 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);background:rgb(244,244,244);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      5 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      6 
    </div></td> 
   <td style="border-color:rgb(192,192,192);background:transparent none repeat scroll 0% 0%;border-collapse:collapse;font-size:12px;line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;min-height:auto;"> 
    <div style="border-width:0px;background:transparent none repeat scroll 0% 0%;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
     <div style="border-width:0px;background:rgb(244,244,244);vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&lt;style type=</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,255);min-height:auto;line-height:1.8em;">"text/css"</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&gt;</code> 
     </div> 
     <div style="border-width:0px;vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">.bg{ background:lightbule;}</code> 
     </div> 
     <div style="border-width:0px;background:rgb(244,244,244);vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&lt;/style&gt;</code> 
     </div> 
     <div style="border-width:0px;vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&lt;div&nbsp;</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,255);min-height:auto;line-height:1.8em;">class</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">=</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,255);min-height:auto;line-height:1.8em;">"bg"</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&gt;</code> 
     </div> 
     <div style="border-width:0px;background:rgb(244,244,244);vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">Hello EveryBody Welcome To UEditor World!</code> 
     </div> 
     <div style="border-width:0px;vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&lt;/div&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

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

<table style="border-spacing:0px;border-width:1px;border-style:solid;border-color:rgb(192,192,192);background:transparent none repeat scroll 0% 0%;font-size:12px;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
 <tbody style="background:transparent none repeat scroll 0% 0%;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
  <tr style="border-top:0px;background:transparent none repeat scroll 0% 0%;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
   <td style="border-color:rgb(192,192,192);background:transparent none repeat scroll 0% 0%;border-collapse:collapse;font-size:12px;color:rgb(175,175,175);line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;min-height:auto;"> 
    <div style="border-right:2px solid rgb(108,226,108);background:rgb(244,244,244);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      1 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      2 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);background:rgb(244,244,244);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      3 
    </div> 
    <div style="border-right:2px solid rgb(108,226,108);border-left-width:0px;vertical-align:baseline;border-bottom-width:0px;text-align:right;min-height:auto;line-height:1.8em;border-top-width:0px;">
      4 
    </div></td> 
   <td style="border-color:rgb(192,192,192);background:transparent none repeat scroll 0% 0%;border-collapse:collapse;font-size:12px;line-height:1.1em;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;min-height:auto;"> 
    <div style="border-width:0px;background:transparent none repeat scroll 0% 0%;vertical-align:baseline;min-height:auto;line-height:1.1em;"> 
     <div style="border-width:0px;background:rgb(244,244,244);vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&lt;div style=</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,255);min-height:auto;line-height:1.8em;">"display: none;"</code> &nbsp; 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">cdata_tag=</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,255);min-height:auto;line-height:1.8em;">"style"</code> &nbsp; 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">type=</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,255);min-height:auto;line-height:1.8em;">"text/css"</code> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&gt;</code> 
     </div> 
     <div style="border-width:0px;vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&lt;p&gt;</code> 
     </div> 
     <div style="border-width:0px;background:rgb(244,244,244);vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">Hello EveryBody Welcome To UEditor World!</code> 
     </div> 
     <div style="border-width:0px;vertical-align:baseline;min-height:auto;line-height:1.8em;"> 
      <code style="border-width:0px;background:transparent none repeat scroll 0% 0%;font-family:Consolas, 'Bitstream Vera Sans Mono', 'Courier New', Courier, monospace;vertical-align:baseline;color:rgb(0,0,0);min-height:auto;line-height:1.8em;">&lt;/p&gt;</code> 
     </div> 
    </div></td> 
  </tr> 
 </tbody> 
</table>

由以上代码可以看出，我们的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自动的转换成别的标签。  
好了，大家可以试一试，看看效果。