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

在使用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标签没有被过滤,我又试了好几次,真的是这个问题~~赶紧记了下来~~哈哈,问题解决~~

时间: 2024-10-06 14:07:57

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

Js 之百度编辑器UEditor插件

一.下载 http://ueditor.baidu.com/website/download.html#ueditor 二.效果图 三.示例 引入js <script type="text/javascript" src="<?php echo base_url() ?>static//plugins/ueditor/ueditor.config.js"></script> <script type="text/j

百度编辑器ueditor隐藏时高度不正确

有几个tab选项卡,切换时显示内容,若选项卡在页面加载时是隐藏的,那么,切换到该选项卡时,百度编辑器的高度会产生错误,在编辑器中,有很长一段空白的页面. 解决方法: 在配置文件中,将autoHeightEnabled设置为false // 是否自动长高,默认true ,autoHeightEnabled:false

百度编辑器前端二开图片上传Js

百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: 替换原来的 ueditor.all.min.js  原文地址:https://www.cnblogs.com/q1104460935/p/10278629.html

jsp 百度编辑器配置 整合springmvc注意细节

百度配置器中默认处理的action可以处理各种请求不需要自己在单独写,尽量不要破坏百度编辑器中自带的jsp demo  我们可以直接使用 参数配置 前后端的配置统一写在后端(PHP版本的config在php/config.json),编辑器实例化时,异步读取后端配置信息,覆盖到前端的配置里. 后端获取的配置项 > 实例化传入的配置项 > ueditor.config.js文件的配置项. 我们需要配置的部分是 1.ueditor.config.js 中入口的位置 // 服务器统一请求接口路径,如

百度编辑器(UEditor)自定义工具栏

百度编辑器(UEditor)自定义工具栏的自定义 百度编辑器默认功能比较齐全,但是不一定是我们所需要的,有的功能可以去掉,用自己想要的就可以了,可以参考百度官方文档! 百度编辑器默认配置展示界面 如何自定义工具栏: 方法一:在实例化编辑器的时候红色文字部分便是你所需要的 1 <script type="text/Javascript"> 2 var editor = UE.getEditor('container',{ 3 //这里可以选择自己需要的工具按钮名称,此处仅选择

【ci框架基础】之部署百度编辑器

在ci框架下加载编辑器,现在复习下内容.我的框架文件名称为ci 1.下载百度编辑器ueditor,http://ueditor.baidu.com/ 一般情况下下载ubuilder版即可,并将ueditor复制到ci框架的根目录下. 下载好的编辑器目录为:-ueditor----dialogs     弹出对话框对应的资源和JS文件----lang        编辑器国际化显示的文件----php         涉及到服务器端操作的后台文件----themes      样式图片和样式文件-

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

前言 这次开发的博客主要功能或特点:    第一:可以兼容各终端,特别是手机端.    第二:到时会用到大量html5,炫啊.    第三:导入博客园的精华文章,并做分类.(不要封我)    第四:做个插件,任何网站上的技术文章都可以转发收藏 到本博客. 所以打算写个系类:<一步步搭建自己的博客> 一.一步步开发自己的博客  .NET版(1.页面布局.blog迁移.数据加载) 二.一步步开发自己的博客  .NET版(2.评论功能) 三.一步步开发自己的博客  .NET版(3.注册登录功能) 四

百度编辑器 Ueditor 如何增加模板 ?

简介: Ueditor 是百度出的开源富文本编辑器,非常符合国人习惯!模板功能很好用,但不能直接自定义, 下面就告诉大家如何增加模板. 查找模板在源代码中的位置: 已经知道其它模板的关键字,比如有:键入文档标题 grep '键入文档标题' -r  dir/ueditor/ 结果: [[email protected] ueditor]#  grep '键入文档标题' -r * dialogs/template/config.js:        "html":'<h1 class

百度编辑器的Python后台

公司最近要做一个内容管理系统,需要在后台集成一个百度编辑器,考察了一下,都推荐百度编辑器. 百度编辑器在HTML中的嵌入很容易,把给出的样例复制到自己的HTML中即可,我不是前端,但是根据我的测试,应该是要引入JQuery的. 嵌入之后,百度编辑器基本就可以使用了,常见的文本格式都可以保存到数据库中,需要的时候直接取出,格式依然还在,看来我的大业已经完成大半了. 这里需要注意的是,如果展示到前台的文档被转义了,比如<p>显示成了<p>之类的,那么就需要查怎么关闭teplate转义,