百度编辑器UEditor源码模式下过滤div/style等html标签

UEditor在html代码模式下,当输入带有<div style="">、<iframe>这类带有html标签的内容时,切换为编辑器模式后,会发现输入的内容被删除,自动过滤掉了。提供两种解决方案:

1、“白名单法“,此即网上找的很多配置黑白名单,不过都适用于老版本;新版本的文件名做了很大改变,找不到那些方法中描述的原样文件。但是,一套程序的原理总是不变的,通过几天的研究、试了多种方法,发现,最新的版本(1.4.3)也有个所谓“白名单”,通过配置即可实现对默认的过滤规则做修改。

在配置文件 ueditor.config.js中,大约354行,有个注释://默认过滤规则相关配置项 ,这里几行是基础的开关。下面有个 xss过滤、insertHTML等操作相关的配置项,这里就是操作重点,"xss过滤白名单"即UEditor中源码模式下,不被过滤的标签。

例如:我们修改 allowDivTransToP为false,在 whitList{}白名单中加入 div标签,则清除浏览器缓存后,在源码模式下编辑div标签,增加样式,切换到编辑器模式,就会生效;返回源码模式,div标签依然存在。

同理,插入视频时,使<embed><iframe>标签不被过滤掉,可在 ,whitList{}中分别增加相应标签及属性:

2、“简单粗暴法”:在文件ueditor.all.js中,有个函数 UE.plugins[‘defaultfilter‘] = function(){......},上面注释为,编辑器默认的过滤转换机制。可在函数开头直接添加 return 语句,使所有过滤机制都不生效。

同理,对ueditor.all.min.js做同样处理:(可搜索 defaultfilter 定位)

这样,UEditor自带的所有过滤机制都无效,可在源码模式下随意使用html标签。

原文地址:https://www.cnblogs.com/yanzi-meng/p/8253810.html

时间: 2024-08-01 17:42:03

百度编辑器UEditor源码模式下过滤div/style等html标签的相关文章

ckedit 在源码模式下插入文本

ckedit的源码模式下是禁用insertText方法的 ,下面是解决方案 if(CKEDITOR.instances[Itemname].mode=='wysiwyg'){ CKEDITOR.instances[Itemname].insertText(TextToInsert); } else{ var input = document.getElementsByClassName('cke_source cke_enable_context_menu')[0]; input.focus()

百度编辑器UEditor PHP版下载

Ueditor是由百度web前端研发部开发所见即所得的编辑器,具有轻量,可定制,注重用户体验等特点.Ueditor基于BSD开源协议,除了具有代码精简.加载迅速的轻量级特质外,还采用了分层理念,使开发者可以根据实际应用和需求自由定制. Ueditor编辑器划分为了三层架构.其中,核心层为开发者提供了诸如range.selection.domUtils类的底层API接口,中间的命令插件层不仅提供了大量的基础command,还允许开发者基于核心层进行command命令的开发,而面向用户端的界面层则可

百度编辑器Ueditor的简单调用

先去ueditou.baidu.com网站下载百度编辑器,放到项目根目录下的Data目录中,然后引入文件 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <script> window.UEDITOR_HOME_URL='__ROOT__/Data/Uedit

百度编辑器ueditor给上传的图片添加水印

百度编辑器本身是没有为上传图片添加水印的功能,想要在上传的时候添加图片水印,也很简单.以 ueditor 1.2.6 为例,打开php目录下面的imageUp.php文件,查找"$info = $up->getFileInfo();",在这句代码的下面加入以下代码: /* 添加水印 start */ $water_img = "watermark.png"; //水印文件(替这里换成你要的水印) $img_min_w = 350; //添加水印需要图片最小达到

百度编辑器ueditor 在vs2008中的使用方法

个人觉得百度编辑器ueditor还是不错的,虽然出生的时间比较短,但某些方面相比其它富文本编辑器更优秀,免费.可定制等等. 由于在官方下载的ueditor包是在vs2012下开发的,可以在vs2010中使用,但在vs2008中就会报错.折腾了一翻,现将解决方法分享给需要的朋友,其实就是把里面包含.net4.0的元素换成.net3.5的 1.下载.net framework 3.5版的Newtonsoft.Json.dll替换原来的 2.删除config.cs里的 using System.Dyn

百度编辑器UEditor不能插入视频的解决方法

在编辑器中就可以引用优酷.腾讯视频的iframe通用代码和embed html代码:移动端一般引用iframe,可设置属性,使其适应设备.(这里,建议切换到源码模式,插入相应的视频代码embed或iframe.其中iframe可编辑大小,优酷embed有效,腾讯embed无效:且腾讯视频的iframe可设置为自动播放,优选) 注意:通过以上两步后,可能出现的新问题是,前端页面不解析<iframe>标签,而是将其原样输出: 解决方法:用html_entity_decode()函数把HTML实体转

【百度编辑器ueditor】工具,如何去掉百度编辑器 ueditor 元素路径、字数统计等

去掉如下截图: 在百度编辑器 ueditor 根目录下: ueditor.config.js 文件中 搜索并将参数elementPathEnabled设置成false即可 常用功能开关如下: ,elementPathEnabled : false //是否启用元素路径,默认是true显示 ,wordCount:false //是否开启字数统计 ,autoHeightEnabled:false // 编辑器内容,是否自动长高,默认true ,fullscreen : false //是否开启初始化

珍珠港源码模式开发系统分析

珍珠港源码模式开发系统分析(微or电 158.1500.1390 小凡团队)珍珠港开发系统,珍珠港平台开发系统,珍珠港模式开发系统,珍珠港复利游戏开发,珍珠港游戏app开发. 作为一个没多少资金,没多大能力,又没很多人脉的三无产品,我们想要创业,想要成功,想要改变自己的现状,唯有依托互联网才是我们唯一的出路,而想要互联网创业,别的都是次要,你必须得具备互联网思维! 互联网每天都会诞生无数个项目和行业,你睡一觉醒来都会发生翻天覆地的变化,我们的思想必须跟上节奏,不然会错过一个时代- 每当互联网诞生

关于百度编辑器UEditor的一点说明

大家在使用的时候要特别注意editor_config.js中的“URL”这个参数 我的理解:1.这个参数是editor整个结构的总路径          2.首先要把这个路径配置好了.才能正常的显示,并使用editor的功能 关于百度编辑器UEditor中的上传图片控件(多图片上传)的提取 本人才疏学浅,用IE一点点来调试.才完成这个功能,结果没有一个清楚的文章分享给大家实在惭愧. 文字不好说明,如果朋友们有需要,请加我的QQ,问题我们一起来讨论