百度编辑器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-10-15 09:18:48

    腾讯 Android 面试笔试总结

    Activity中的几种启动模式 Android消息机制 IntentService 事件分发 Android性能优化、内存优化 内存优化 View的绘制 Eventbus原理 Rxjava的操作符有哪些,说说他们的作用 线程锁 锁方法和类对象啥的有啥区别 AsyncTask原理 说说MVP和MVVM的特点 Android中用到的观察者模式有哪些地方 说说google新出的Lifecycle框架 okhttp原理 Retrofit原理 RecyclerView源码、缓存分析 Binder机制 Android Jetpack Kotlin Activity中的几种启动模式

  • 2019-10-15 09:20:49

    SpringBoot注解梳理

    @SpringBootApplication:包含了@ComponentScan、@Configuration和@EnableAutoConfiguration注解。其中@ComponentScan让spring Boot扫描到Configuration类并把它加入到程序上下文。 @Configuration 等同于spring的XML配置文件;使用Java代码可以检查类型安全。 @EnableAutoConfiguration 自动配置。 @ComponentScan 组件扫描,可自动发现和装配一些Bean。 @Component可配合CommandLineRunner使用,在程序启动后执行一些基础任务。 @RestController注解是@Controller和@ResponseBody的合集,表示这是个控制器bean,并且是将函数的返回值直 接填入HTTP响应体中,是REST风格的控制器。 @Autowired自动导入。 @PathVariable获取参数。 @JsonBackReference解决嵌套外链问题。 @RepositoryRestResourcepublic配合spring-boot-starter-data-rest使用。

  • 2019-10-15 09:52:00

    动图解释递归,按值传递和按引用传递的区别,线性查找和二分查找,二叉查找树

    对于大部分人,数据结构一直是一个短板,当然我也是,不是学不会,而是容易忘,就拿最简单的排序来说吧,当时学习的时候明明已经弄得很清楚了,过了一段时间不用又忘记了,还要重新再看一遍,不知道有多少小伙伴和我有一样的烦恼。今天让我们用用动图的方式学习一下数据结构中的递归和二分查找吧,这种讲解方式非常生动,而且非常容易记住和理解。

  • 2019-10-16 21:02:47

    vue中mixins的详细分析一

    混入 (mixins): 是一种分发 Vue 组件中可复用功能的非常灵活的方式。混入对象可以包含任意组件选项。当组件使用混入对象时,所有混入对象的选项将被混入该组件本身的选项。