百度编辑器Ueditor的黑白名单过滤

2017-04-26 22:59:15

百度编辑器Ueditor 黑白名单过滤

serialize: 黑白名单配置。UEditor针对进入编辑器的富文本内容提供了节点级别的过滤,可以通过该配置的修改来达到控制富文本内容的目的

黑白名单可以同时使用,也可以单独分开使用。
黑名单中的标签将会被编辑器完整地过滤掉,包括标签本身以及标签之内的任何内容。
而不在白名单之中的那些标签则仅被过滤了标签本身,其内容会继续走过滤流程。

具体的黑白名单配置示例如下所示,其中$表示元素的属性: 

serialize : { 
    //黑名单,编辑器会过滤掉以下标签 
    blackList:{style:1, link:1,object:1, input:1, meta:1}, 
    //白名单,编辑器会根据此配置保留对应标签下的对应标签或者属性 
    whiteList:{  
        'p': {'br':1,'BR':1}, 
        'br':{'$':{}}, 
        'div':{'br':1,'BR':1,'$':{'id':1,'style':1}} 
    } 
}

该配置中,blackList黑名单中不允许编辑器中出现style,link等标签,任何外部粘贴进来的数据如果包含这些节点(包括其子节点),都会被编辑器过滤掉。而白名单中的配置则表示允许对应标签中存在对应的属性或者子节点,以div为例,该配置允许外部粘贴的div标签中包含br节点,且可以允许id属性以及style属性。至于br标签内部允许不允许其他内容,则有br标签对应的配置来决定,如例子所示的话,则br标签不允许任何自己点或者属性存在。

需要说明的是,此处的配置仅针对非纯文本粘贴模式时有效,如用户开启了纯文本模式,则需要手动修改paste.js中对应的黑白名单配置。由于该模式使用较少,所以未对外提供配置项。


在editor_config.js里边搜索blackList,打开注释,使用自定义配置参数覆盖默认值 。
//黑名单,编辑器会过滤掉一下标签
blackList:{style:1, link:1,object:1, applet:1, input:1, meta:1, base:1, button:1, select:1, textarea:1, '#comment':1, 'map':1, 'area':1}
}

  • 2020-04-14 15:35:52

    caniuse前端兼容性检查和使用

    相信大家都曾用caniuse网站查询过css、js的一些兼容性问题,并且都从它反馈的兼容性数据中获益,让我们的线上项目更加稳定、和谐的跑在用户电脑里。不过对于caniuse页面上的一些细节,我们可能会感到困惑或者模棱两可,今天就带着大家一起来重新认识caniuse这个网站,并对它的原理和细节做些探究。

  • 2020-04-15 17:00:07

    export和import的理解,这一篇问扎根就够了

    在 ES6 之前,社区制定了一些模块加载方案,最主要的有 CommonJS 和 AMD 两种。前者用于服务器,后者用于浏览器。ES6 在语言标准的层面上,实现了模块功能,而且实现得相当简单,完全可以取代 CommonJS 和 AMD 规范,成为浏览器和服务器通用的模块解决方案。

  • 2020-04-15 21:14:13

    .d.ts与.ts的区别 .d.ts怎么用

    在TypeScript项目中直接引入Javascript包是不能使用的,因为包中缺少TypeScript类型声明,如果是自己写的包,可以考虑自己增加一个.d.ts类型声明文件,如果代码比较多或者使用的是第三方的包,自己写就比较麻烦了。第三方的包首先考虑找一个别人写好的声明文件,如果没有可以使用一些自动生成声明文件的工具。

  • 2020-04-17 09:27:38

    推荐一个老前端开发者的博客

    前端修炼场,首页标签大全greenSock前端研究VUE研究我们的作品flash技术探讨开发心得个人档案培训与招聘服务报价

  • 2020-04-17 09:41:47

    前端css博客推荐

    这个博客有大量的css内容,有svg,TweenMax等教程,抽空通读一下