[js]使用百度编辑器uediter时遇到的一些问题(span,div等被过滤)

摘要:
dtd.$empty[node.tagName]&&(!node.attrs||utils.isEmptyObject(node.attrs))){if(!

在使用uediter编辑html代码的时候,div,span等标签会莫名其妙的被过滤掉,然后上网查资料,改了点配置:

1:在ueiter.all.js中找到allowDivTransToP

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

把 true改为false

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

2:在ueditor.config.js中找到allowDivTransToP

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

把true改为false

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

3在ueditor.config.js中找到whitList白名单

有的地方说直接添加一个div[] span[] 类似于:

[js]使用百度编辑器uediter时遇到的一些问题(span,div等被过滤)第1张

但是下面已经配置有这两项

[js]使用百度编辑器uediter时遇到的一些问题(span,div等被过滤)第2张

[js]使用百度编辑器uediter时遇到的一些问题(span,div等被过滤)第3张

所以我就根据我的需要,在这两项中添加了'name','id'就像上图。如果有其他标签就再添加

4在ueiter.all.js中找到me.addOutputRule...

把该注释的注视掉,代码如下

    //从编辑器出去的内容处理
    me.addOutputRule(function(root) {
        varval;
        root.traversal(function(node) {
            if (node.type == 'element') {
                /*if (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(node.tagName) {
                    case 'div':
                        if (val = node.getAttr('cdata_tag')) {
                            node.tagName =val;
                            node.appendChild(UE.uNode.createText(node.getAttr('cdata_data')));
                            node.setAttr({cdata_tag: '', cdata_data: '','_ue_custom_node_':''});
                        }
                        break;
                    case 'a':
                        if (val = node.getAttr('_href')) {
                            node.setAttr({
                                'href': utils.html(val),
                                '_href': ''
                            })
                        }
                        break;
                        break;
                    /*case 'span':
                        val = node.getAttr('id');
                        if(val && /^_baidu_bookmark_/i.test(val)){
                            node.parentNode.removeChild(node)
                        }
                        break;*/
                    case 'img':
                        if (val = node.getAttr('_src')) {
                            node.setAttr({
                                'src': node.getAttr('_src'),
                                '_src': ''
                            })
                        }
                }
            }
        })
    });
};

5在ueiter.all.js中找到enterTag: 'p',改为:enterTag: '',这一步

然后以上的都改完之后,div和span标签基本上标签就不会被过滤了,但是悲催的是,我测试的时候span标签又被过滤了

原有代码:

<div class="td-text fl">
  <span><p style="margin-top:60px;">初始</p></span>
</div> <div class="text-one fl">   <div class="one-one">     <span class="fl"><p>挂资质</p></span>     <span class="fl"><p>1.2W/年</p></span>   </div>   <div class="one-two">     <span class="fl"><p>挂项目</p></span>     <span class="fl"><p>1.3W/年</p></span>   </div>
</div>

被过滤后的代码:

<div class="td-text fl">
  <p style="margin-top:60px;">初始</p>
</div>
<div class="text-one fl">
  <div class="one-one">
    <span class="fl"><p>挂资质</p></span>
    <span class="fl"><p>1.2W/年</p></span>
  </div>
  <div class="one-two">
    <span class="fl"><p>挂项目</p></span>
    <span class="fl"><p>1.3W/年</p></span>
  </div>
</div>

带有class的span没有被过滤,什么都没有的span被过滤了...什么鬼,怎么会这样...

抓耳挠腮半小时之后,偶然的一瞥,看到ueiter.all.js中有一个autoClearEmptyNode:true,抱着试一试的态度,我给改成了false,然后再一试,成了,那个什么都没有的span标签没有被过滤,我又试了好几次,真的是这个问题~~赶紧记了下来~~哈哈,问题解决~~

免责声明:文章转载自《[js]使用百度编辑器uediter时遇到的一些问题(span,div等被过滤)》仅用于学习参考。如对内容有疑问,请及时联系本站处理。

上篇Makefile中一些特殊符号的意义python中count函数的用法下篇

宿迁高防,2C2G15M,22元/月;香港BGP,2C5G5M,25元/月 雨云优惠码:MjYwNzM=

相关文章

移动端——JS(一)

javascript(简称js)语言在移动前端可以说必不可少,许多效果都是和js相关的,包括现在移动端的一些框架:jqmobi、jqtouch、sencha touch、jquerymobile等等。都是基于js编写的。 暂时不讨论这些框架,主要讨论一下部分常用的js事件在移动端的使用。举几个例子: 1、隐藏地址导航栏: <script> /...

node-glob学习

node的glob模块允许你使用 *等符号, 来写一个glob规则,像在shell里一样,获取匹配对应规则的文件. 这个glob工具基于javascript.它使用了 minimatch 库来进行匹配 用法: 首先下载glob包:  npm install glob 调用格式: var glob = require("glob") // optio...

kindeditor在线编辑器的使用心得

1、如何声明引用? <!DOCTYPEhtml> <html> <head> <metacharset="utf-8"/> <title>kindeditor在线编辑器的使用心得</title> <!--添加kindeditor的引用--> <scr...

VS Code (visual studio code) VSC 编辑器(微软出品,js开发的编辑器)

一.选择合适的编辑器,提高编程效率 代码编辑器的选择,可以说是开发者社区中一个经久不衰的话题,现今编辑器的数量数不胜数,vim,sublime Text,Emacs,Atom等等,那么对于一个开发者而言,挑选一个合适的编辑器是可以有效的提高编程效率; 选择编辑器时,需要考虑的三个因素: 1.选择的编辑器对文本,代码的编程效率要求有多高; 2.选择的编辑器对...

用JS添加和删除class类名

下面介绍一下如何给一个节点添加和删除class名 添加:节点.classList.add("类名"); 删除:节点.classList.remove("类名"); 以tab切换为例: 在写tab切换的时候,通常我们会给选中的tab设置不同的样式,常用的方法是给被选中的tab新增一个class名,然后改这个class名的样式。 比如 起一个class名叫“a...

使用defined和require引入js

define(function(require, exports, module) { var ceshiTwo ={ dataCeshi:[1,2,3,4,5], arrCeshi:function(){ var _this=this; var array=[]; $.e...