百度编辑器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}
}
百度编辑器Ueditor的黑白名单过滤
-
Nuxt 特有函数和变量
asyncData方法使得你能够在渲染组件之前异步获取数据。该方法在服务端中执行的,所以,请求数据时,不存在跨域问题。返回的数据将与 data() 返回的数据进行合并。由于asyncData方法是在组件 初始化 前被调用的,所以在方法内是没有办法通过 this 来引用组件的实例对象。
-
v-charts修改颜色、半径以及图例位置
v-charts 图表的一些简单用法 1.v-charts修改颜色的方法
-
触发onclick事件元素的获取
自动生成元素的onclick事件 event.target返回触发事件的元素 event.currentTarget返回绑定事件的元素
-
javaScript替换元素节点
使用原生JS替换节点,使用jquery进行替换节点
-
js 正则过滤 行内 style 样式
js 正则过滤 style 行内样式 及 style 属性
-
vue2 实现 div contenteditable="true" 类似于 v-model 的效果
我们组装了一个contenteditable的div并且提供了v-model功能
-
JS实现HTML标签转义及反转义
简单说一下业务场景,前台用户通过input输入内容,在离开焦点时,将内容在div中显示。 这时遇到一个问题,如果用户输入了html标签,则在div显示中,标签被解析。 由于是纯前端操作,不涉及后端,因此需要通过js对输入内容进行转义。
-
vue 中如何获取 slot 中的内容
this.$slots.default
-
写一个可插入自定义标签的 Textarea 组件
为了实现这个功能,我最先想的是改造一个 <textarea> 然后我想到了 contenteditable (链接指向 mozilla.org) 这一属性 这是一个 html5 的属性,可以让元素内容可编辑
-
通过highlight.js在vue中实现代码高亮
在 vue-cli3 项目中,通过highlight.js,实现页面中代码高亮。 请先了解highlight.js官网中的使用说明。