欢迎来到六久阁织梦模板网!
织梦ueditor百度编辑器div style被过滤解决办法

织梦ueditor百度编辑器div style被过滤解决办法

浏览次数: 0

作者: 六久阁织梦模板网

信息来源: 六久阁

更新日期: 2020-01-18

文章简介

开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结。 1. UEditor样式被过滤无法显示问题 上周有用到百度开源的富文本编辑器----UEditor.不得不说这个

  • 正文开始
  • 热门文章

开发中有用到开源的富文本编辑器UEditor,在使用的过程中遇到了样式被过滤无法显示问题,经过一番折腾终解决,此外,还有一些关于获取前台界面元素的一些总结。

1. UEditor样式被过滤无法显示问题

         上周有用到百度开源的富文本编辑器----UEditor.不得不说这个富文本编辑器做的真的很赞,个人觉得比CKeditor要好用很多,效果也很不错。

但是在使用的过程中,有遇到在向文本编辑器插入HTML文本时,添加的样式老是被过滤掉,找了很多的资料,并结合最新的版本,整理了下如何解决样式过滤的方法。

我们在富文本编辑页点击HTML小图标,切换到HTML模式,然后在该模式下加入如下HTML:

<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:

<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试图,内容如下:

<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自动的转换成别的标签。

好了,大家可以试一试,看看效果。


2.JQuery.attr()与JQuery.css()的区别

     之前一直没太区分attr()与css,今天好好看了下,css和attr作用的范围不同,css主要是用来设置样式的,也就是style内的东西,而attr主要是用来设置属性的,比如元素的title,name、style等这些都可以称之为属性,举例说明

  <input  id="btn"  type="button" value="确定” />

我们可以用$("#btn").css("background","green");为该按钮设置一个背景色,

而如果我们这样写$("#btn").attr("background","green");不但按钮的背景色不会发生变化,相反该按钮在页面渲染之后又多了一个background的属性,请注意,这里是属性,而不是style里边的background,页面的渲染如下:

<input  id="btn"  type="button" value="确定”  background="green" />

织梦二次开发QQ群

本站客服QQ号:862782808(点击左边QQ号交流),群号(383578617) DedeCMS织梦教程QQ群 如果您有任何织梦问题,请把问题发到群里,阁主将为您写解决教程!

转载请注明: 织梦模板 » 织梦ueditor百度编辑器div style被过滤解决办法

标签: 织梦编辑器
  • 织梦dedecms手机站m目录下不生成index.html实现动态更新
    阅读
    用 织梦建站 会手机站首页不更新的苦恼,每次 PC 更新,要去删除 m 目录下的 index.html ,手机站首页才会更新,这样很麻烦,通过以下修改,让手机站首页是动态的,不生成 index.html , PC 端更新后,手机端首页自动更新。 把 \m\index.php 里面的 $row[sho...
  • 织梦Fatal error: Call to undefined function make_hash() in /dede/sys_info.php on line 201的解决方法
    阅读
    织梦系统安装好后,进入后台,出现Fatal error: Call to undefined function make_hash() in /dede/sys_info.php on line 201 一般出现这个问题是因为升级网站引起的。我们可以直接把错误提示这段代码删除或者屏蔽就行了。 打开/dede/sys_info.php,找到201...
  • 织梦Dedecms 5.7 火车头采集免登陆发布接口适配PHP7.X插件
    阅读
    最近有粉丝说,之前用的火车头发布文章时,用免登陆接口在PHP7.0环境中显示空白,于是今天抽空更新了一下插件(话说,DedeCms早期版本无法在PHP7.X运行,用最新版的!),那么接下来的代码就是插件发布模块无须变更,只需要变更接口插件就可以了 ?php/*/////...
  • 织梦dedecms系统多城市分站功能开发思路
    阅读
    当前很多人用织梦dedecms系统建站,多城市分站对地方性长尾关键词和全国市场的推广有着很大的帮助,今天和大家分享下如何实现织梦dedecms系统多城市分站功能。 方法/步骤 织梦dede城市分站有三种方法: 第一种是建立N多个模板,有多少个城市建立多少个模板,...
  • 织梦dedecms提交自定义表单后发送到指定邮箱
    阅读
    网上很多教程都是用 dedecms 自带的邮件库发送邮件,而且是写死要发送的字段内容,今天我们用 phpmailer 来给站长发送自定义表单提交的数据到指定邮箱上 (QQ 邮箱, 163 邮箱都可以 ) ,不写死任何东西,有什么字段就提交发送什么字段。 操作之前,我们要先...
  • dedecms织梦ckplayer视频播放器插件详细安装教程
    阅读
    织梦 ckplayer 视频播放器插件安装步骤: 第一步、下载安装插件。下载地址:点击此处 将下载下来的压缩包中的相应编码的模块文件解压出来再上传到织梦程序的 data/module/ 文件夹内或者直接在后台模块管理菜单里面选择上传新模块安装即可。如下图: 1.1 )上...
  • 织梦dedecms网站添加打赏功能
    阅读
    有时我们看到别人家的织梦dedecms网站有打赏功能,是不是羡慕嫉妒恨呢?今天我来给大家讲讲织梦网站怎么添加支付宝、微信打赏功能。 二、首先登陆畅言后台(没有畅言账号的首先注册账号) 三、进入后台,找到实验室--打赏 四、设置配置信息,保存。 五、复制...
  • 织梦5.7火车头免登陆文章发布模块采集后自动更新织梦整站
    阅读
    织梦5.7火车头免登陆文章发布模块采集后自动更新织梦整站详细步骤: 1、下载文档后,把DedeCMS免登陆接口文章发布模块DedeCMS 5.7 免登陆接口文章发布模块.wpm复制到火车头采集规则文件夹Module下; 2、选择您网站对应的接口文件.如您网站是gbk编码,请选择 g...
  • 织梦火车头采集免登陆接口采集文章后自动更新栏目、首页、文章页,实现自动化采集
    阅读
    最近用织梦dedecms程序采集文章时候,发现每次采集都要去后台更新一下文章、栏目、上下篇以及首页,操作起来真心麻烦,后面在网上收集了一些代码以及经过自己调试,发现居然可以自动更新文章页以及栏目、首页。真心爽,这样子就能稳稳的挂机采集了哈。这是免...
  • 织梦获取当前栏目id并判断使当前导航栏目高亮
    阅读
    织梦导航栏目高亮代码如下: {dede:field name=typeid runphp=yes} if(@me==8) @me=1; else @me=0; {/dede:field} 导航的写法, 比如:lia href={dede:type typeid=7}[field:typelink /]{/dede:type} {dede:field name=typeid runphp=yes} if(@me==7) @me=cl...
收藏此文 打赏本站

如本文对您有帮助,就请六久阁织梦模板网抽根烟吧!

  • 支付宝打赏
    支付宝扫描打赏
    微信打赏
    微信扫描打赏
织梦php7的版本下,百度编辑器Ueditor多图上传后编辑器出现重复
« 上一篇 2020年01月18日
织梦页面上调用当前登陆会员信息方法
下一篇 » 2020年01月18日

精彩评论

有问题在这里提问,阁主会为你解决!
  • 全部评论(0
    还没有评论,快来抢沙发吧!
推荐织梦插件更多
更新时间:2017-07-07

人已经看过了!

更新时间:2019-10-03

人已经看过了!

更新时间:2020-04-12

人已经看过了!

更新时间:2018-06-07

人已经看过了!

更新时间:2019-07-30

人已经看过了!

推荐精品模板更多
木质地板-家具橱柜织梦模板 带手机版
更新时间:2017-08-10

人已经看过了!

精仿新版阿里百秀织梦自适应终端模板
更新时间:2017-08-10

人已经看过了!

安防监控_电子数码_医疗设备织梦自适应模板
更新时间:2017-08-10

人已经看过了!

大学职业学院技术学校类织梦模板(带手机端)
更新时间:2018-04-24

人已经看过了!

仿魔酷阁织梦整站下载
更新时间:2021-10-21

人已经看过了!

漂亮清爽的织梦会员中心模板带推广邀请发布文章
更新时间:2021-10-21

人已经看过了!