前言:
上周开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结。
1. UEditor样式被过滤无法显示问题
上周有用到百度开源的富文本编辑器----UEditor.不得不说这个富文本编辑器做的真的很赞,个人觉得比CKeditor要好用很多,效果也很不错。
但是在使用的过程中,有遇到在向文本编辑器插入HTML文本时,添加的样式老是被过滤掉,找了很多的资料,并结合最新的版本,整理了下如何解决样式过滤的方法。
我们在富文本编辑页点击HTML小图标,切换到HTML模式,然后在该模式下加入如下HTML:
1
2
3
4
5
6
|
<style type= "text/css" >
.bg{ background:lightbule;} </style> <div class = "bg" >
Hello EveryBody Welcome To UEditor World! </div> |
以上的html意思很简单,就是为div加了一个名为bg 的样式,
然后我们再点击HTML图标,转换到预览页,可以看到我们的div的背景色并没有任何的变化,而且我们在div之前写的样式,也没有被渲染,
反而是以文本的形式显示了出来。
F12查看整个页面,发现我们之前写的样式和标签都被渲染成如下的html:
1
2
3
4
|
<div style= "display: none;" cdata_tag= "style" type= "text/css" >
<p> Hello EveryBody Welcome To UEditor World! </p> |
由以上代码可以看出,我们的style标签被转换成了div,并且设置样式为不可见,我们的div标签被转换成了p标签。
这说明编辑器本身自己做了一个转换,类似于一个过滤吧,可能是为了出于安全性考虑,防止用户在前段输入非法的代码、脚本等,事实上我觉得这有点多此一举,
既然都让富文本编辑了,不能写html脚本,还叫什么富文本。
然后我们再点击HTML图标,看看HTML试图,内容如下:
1
2
3
4
|
<style type= "text/css" >.bg{ background:lightbule;}</style>
<p> Hello EveryBody Welcome To UEditor World! </p> |
结合以上分析得出,该编辑器内部过滤机制是将style标记转换为div,而将div等标签以p替代。如何解决呢?
之前有在网上查过相关的资料,都说是在配置文件里有一个黑白名单,然后就在配置文件里找了下,在最新版本的脚本文件里怎么找也没找到那个所谓的黑白名单,
当然了,没有黑白名单也照样可以解决问题的。
首先在ueditor.all.js文件内搜索allowDivTransToP,找到如下的代码,将true设置为false
me.setOpt('allowDivTransToP',false);
//默认的过滤处理
//进入编辑器的内容处理
然后再接着下边的addInputRule方法中将switch代码段中的case style,script都给注释或者删掉。
me.addInputRule(function (root) {
var allowDivTransToP = this.options.allowDivTransToP;
var val;
//进行默认的处理
root.traversal(function (node) {
if (node.type == 'element') {
if (!dtd.$cdata[node.tagName] && me.options.autoClearEmptyNode && dtd.$inline[node.tagName] && !dtd.$empty[node.tagName] && (!node.attrs || utils.isEmptyObject(node.attrs))) {
if (!node.firstChild()) node.parentNode.removeChild(node);
else if (node.tagName == 'span' && (!node.attrs || utils.isEmptyObject(node.attrs))) {
node.parentNode.removeChild(node, true)
}
return;
}
//删除switch下的case style 和script
switch (node.tagName) {
case 'a':
if (val = node.getAttr('href')) {
node.setAttr('_href', val)
}
break;
完成以上操作之后,保存即可。再次插入html时,样式就可以显示了。
解释一下以上操作的意义。
第一步将allowDivTransToP设置为false是因为默认的设置是将div自动转换为p,这样写好的样式就找不到相应的div
了,所以才渲染不上的。
第二步将addInputRule函数中的switch 代码段中的case style ,script选择给删除或者注释,是为了避免出现编辑器将style或script自动的转换成别的标签。
好了,大家可以试一试,看看效果。
相关推荐
总结一下自己给编辑器定制样式的过程中所遇到的问题,主要是编辑器的二次开发接口,以及用angular定制样式,问题不少,终于在**的帮助下,完成了,还剩下老版本和新版本的交互没有弄好,不过不难。下面分别讲解问题...
DjangoUeditor将Ueditor封装为一个Django app,提供文件/图片等上传功能,提供UEditorField、UEditorWidget等封装类,简化Ueditor在Django中的应用。注:Django是Python世界影响最大的Web框架。 本模块帮助在Django...
IP追溯、数字过滤、火星文过滤、自定义提示语、直接拦截等功能,加上利用正则制作的黑词列表和敏感词列表,帮助您更好拦截SPAM 支持智能手机管理博客 手机wap功能进一步增强,支持图片上传,支持文章管理,...
word粘贴的图片只能获取本机的临时路径,并且无法判别是否是图片,无法以文件形式上传后台,故后续不继续考虑和实现word图片粘贴问题,参照ueditor后发现也没有实现该功能,替换过滤了标签多余样式 修改字体/字体...
3、富文本编辑器,集成的是kindeditor,本来想集成百度的Ueditor的,配置起来没这个简单,呵呵,注意,本人的电脑foxfire浏览器无法多图上传,360浏览器可以,应该是跟flash有关 4、过滤器,在java中好像叫拦截器 ...
我在我的项目中使用了Kindeditor富文本编辑器(或许你使用的是Ueditor\ckeditor),通过富文本编辑器编辑文章的内容然后存储到数据库中,再从数据库中读取显示到网页上来。 在这个过程中,我遇到一个问题,当我在...
IP追溯、数字过滤、火星文过滤、自定义提示语、直接拦截等功能,加上利用正则制作的黑词列表和敏感词列表,帮助您更好拦截SPAM 支持智能手机管理博客 手机wap功能进一步增强,支持图片上传,支持文章管理,支持...
9、修正了图片过滤的安全问题(感谢@printf_sky @sqzr )。 10、修正了大量BUG。 安装方法: 运行根目录下的install.php文件即可 后台访问地址:http://你的域名或IP/index.php?anonymous/admin 帐号和密码...
反垃圾评论插件升级 IP追溯、数字过滤、火星文过滤、自定义提示语、直接拦截等功能,加上利用正则制作的黑词列表和敏感词列表,帮助您更好拦截SPAM 支持智能手机管理博客 手机wap功能进一步增强,支持图片上传,...
■修复:多文件上传,被禁止的上传的文件(exe等危险文件)显示Bug ■扩展:使用新版本Jquery.js(升级到全新的v3.2.1) ■修复:节点链接Bug ■修复:单页--只允许首页生成 ■修复:扩展--运行SQL语句增加二次密码校验 ...
uexam学之思在线考试系统是一款 java + vue 的前后端分离的考试系统。主要优点是开发、部署简单快捷、...2.修复单选题,选项情况无法新增选项的bug 3.文档新增数据库设计 4.前端组件更新 5.移除lombok插件,减少依赖