在使用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[] 类似于:

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

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

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

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

    //从编辑器出去的内容处理
me.addOutputRule(function (root) {
var val;
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等被过滤)的更多相关文章

  1. 在使用 百度编辑器 Ueditor 时,不能进入 Controller 相应的 Action 的处理方法

    如果在前端的页面中使用了 Ueditor 编辑器,那么在提交表单数据时,将不会执行 期望的 Controller 中的 Action ,造成这样的原因是: 在 MVC 4 的框架中,当前端页面需要提交 ...

  2. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  3. 百度编辑器ueditor批量上传图片或者批量上传文件时,文件名称和内容不符合,错位问题

    百度编辑器ueditor批量上传附件时,上传后的文件和实际文件名称错误,比如实际是文件名“dongcoder.xls”,上传后可能就成了“懂客.xls”.原因就是,上传文件时是异步上传,同时进行,导致 ...

  4. 百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法

    百度编辑器ueditor 异步加载时,初始化没办法赋值bug解决方法 金刚 前端 ueditor 初始化 因项目中使用了百度编辑器——ueditor.整体来说性能还不错. 发现问题 我在做一个编辑页面 ...

  5. ueditor 百度编辑器图片上传 接 node.js 及一些前端自定义

    百度编辑器 用node.js 做服务端 demo 大神已整理的 记录一下 以作参考 https://github.com/netpi/ueditor 1. 前端图片工具栏上传input file在这里 ...

  6. 一步步开发自己的博客 .NET版(4、文章发布功能)百度编辑器

    前言 这次开发的博客主要功能或特点: 第一:可以兼容各终端,特别是手机端. 第二:到时会用到大量html5,炫啊. 第三:导入博客园的精华文章,并做分类.(不要封我) 第四:做个插件,任何网站上的技术 ...

  7. 百度编辑器UEditor的使用方法

    百度编辑器具有丰富文本编辑功能,且开源免费,其使用方法如下: 1.在官网上下载对应的Uditor压缩包:http://ueditor.baidu.com/website/download.html 2 ...

  8. UEditor百度编辑器,工具栏上自定义添加一个普通按钮

    添加一个名叫“hougelou”的普通按钮在工具栏上: 第一步:找到ueditor.config.js文件中的toolbars数组,增加一个“hougelou”字符串,然后找到labelMap数组,对 ...

  9. 工具,如何去掉百度编辑器 ueditor 元素路径、字数统计等

    去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,ele ...

随机推荐

  1. 关于PHP的 PHP-FPM进程CPU 100%的一些原因分析和解决方案

    之前碰到过php-fpmCPU高达80%-90%,特此记录下 1. 查看是否是硬件问题 方式:top  命令 主要查看:load average(平均负载),这是一个4核8G内存的服务器 1分钟平均负 ...

  2. 第二篇:用Android Studio编写Hello World

    将Android Studio的环境搭建好后,第一个写Hello World测试程序.Android Studio v3.2.1. 一.新建工程 点击Start a new Android Studi ...

  3. 2018最完整ITTO分节整理指导(PMP项目管理入门必备)

    2018年项目管理基础教材<PMBOK>指南进行了改版,之前的一些PMP资料没有太大帮助,反而会让大家记忆混淆,用最新的会好一些,今天小编就把搜集到的2018年项目管理最详细的ITTO的P ...

  4. Linux批量修改(删除)文件名某些字符(rename命令)

    假设在路径C:/下存在多个类似以下的文件名 file_nall_abc1.txt file_nall_abc2.txt file_nall_abc3.txt file_nall_abc4.txt fi ...

  5. Day29--Python--缓冲区, 粘包

    tcp: 属于长连接,与一个客户端进行连接了以后,其他的客户端要等待.要想连接另外一个客户端,需要优雅地断开当前客户端的连接 允许地址重用:server.setsockopt(socket.SOL_S ...

  6. Linux下 文件操作(base)

    1.新建文件夹 mkdir bigdata:在当前文件夹下新建bigdata文件夹: 2.显示当前文件夹全目录 pwd: 3.移动文件:mv /usr/etc/spark-2.3.1-bin-hado ...

  7. HTML学习笔记Day16

    一.CSS 3D 1.什么是3d的场景呢? 2d场景,在屏幕上水平和垂直的交叉线x轴和y轴 3d场景,在垂直于屏幕的方法,相对于2d多出个z轴 Z轴:靠近屏幕的方向是正向,远离屏幕的方向是反向 2.C ...

  8. 上这个资源网站,让你轻松无忧找mac软件资源

    之前分享过好几篇关于mac软件相关的文章(想要看其他的mac软件专题文章,可以关注我,点击进入查看发表的文章),有网友表示,优质的软件推荐清单有了,想要下载和获取mac软件,买一个正版软件在APP s ...

  9. windows下配置host不生效问题

    今天遇到了host配置之后不生效的问题,原因是文本编辑器用的是非windows格式,再notepad++右下角切换一下即可,将notepad++ 视图-显示符号-显示所有字符勾上之后可以看到windo ...

  10. Kafka技术内幕 读书笔记之(四) 新消费者——心跳任务

    消费者拉取数据是在拉取器中完成的,发送心跳是在消费者的协调者上完成的,但并不是说拉取器和消费者的协调者就没有关联关系 . “消费者的协调者”的作用是确保客户端的消费者和服务端的协调者之间的正常通信,如 ...