百度编辑器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}
}

  • 精彩推荐

  • 2019-11-07 08:47:00

    详解vue2.6插槽更新v-slot用法总结

    在 2.6.0 中，我们为具名插槽和作用域插槽引入了一个新的统一的语法 (即 v-slot 指令)。这篇文章主要介绍了详解vue2.6插槽更新v-slot用法总结，具有一定的参考价值，感兴趣的小伙伴们可以参考一下

  • 2019-11-08 09:34:46

    CSS3 Transition详解和使用

    Transition 可以设置 CSS 属性的过渡效果，它有以下几个属性。 transition-property 用于指定应用过渡属性的名称 transition-duration 用于指定这个过渡的持续时间 transition-delay 用于指定延迟过渡的时间 transition-timing-function 用于指定过渡的类型 transition-property transition-property 用于指定应用过渡的属性名称，可以指定多个属性名称，多个属性名称之间用, 分隔。 默认值为 all 也就是所有的元素都应用过渡效果。 例如，想让容器的宽高有一个过渡的效果，就可以这样写:

  • 2019-11-09 19:16:35

    java标记过期方法

    java注解：@Deprecated(不建议使用的，废弃的)；@SuppressWarnings(忽略警告，达到抑制编译器产生警告的目的)

  • 2019-11-12 02:56:39

    使用.htaccess重定向后无法显示图片，CSS失效,该如何处理

    现在我需要把这个域名泛解析到blog目录(*.mydomain.org)，同时保持另外两个目录的解析不变。尝试对最后一段作以下修改后（前面的内容不变），出现问题：另两个目录中的网站内的图片无法显示,CSS全部失效。

  • 2019-11-14 11:21:34

    vue中的this指向问题

    ※ 对于普通函数（包括匿名函数），this指的是直接的调用者，在非严格模式下，如果没有直接调用者，this指的是window。showMessage1()里setTimeout使用了匿名函数，this指向 window。 ※ 箭头函数是没有自己的this，在它内部使用的this是由它定义的宿主对象决定。showMessage2()里定义的箭头函数宿主对象为vue实例，所以它里面使用的this指向vue实例。