最新公告
  • 欢迎您光临,本站秉承服务宗旨 履行“站长”责任,销售只是起点 服务永无止境!立即加入我们
  • 开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结。

    1. 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自动的转换成别的标签。

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

     

    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" />

    本文为amz博客的原创或转载文章,如有侵权,请点击网站右下角联系客服,为了保护原创作者及本站的版权,遵循33890版权协议,转载请附上原文出处链接及本声明,谢谢。
    amz博客-网站源码-一个免费的互联网资源分享平台-网站源码免费下载 » 织梦ueditor百度编辑器div style被过滤解决办法
    • 3032会员总数(位)
    • 21562资源总数(个)
    • 0本周发布(个)
    • 0 今日发布(个)
    • 291稳定运行(天)

    amz博客-提供最优质的资源集合

    立即查看 了解详情