ThinkPHP整合百度Ueditor

ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的
申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOME_URL
他在教程里面已经说了的,我就不再次说了啊,就一笔带过,好了不废话!
在调用编辑器的时候首先先初始化一些值:

 1 <script type="text/javascript" charset="utf-8">
 2     window.UEDITOR_HOME_URL = "/Public/ueditor/";  //UEDITOR_HOME_URL、config、all这三个顺序不能改变
 3     window.onload=function(){
 4         window.UEDITOR_CONFIG.initialFrameHeight=300;//编辑器的高度
 5         window.UEDITOR_CONFIG.imageUrl="{:U(‘admin/Category/checkPic‘)}";          //图片上传提交地址
 6         window.UEDITOR_CONFIG.imagePath=‘ /Uploads/thumb/‘;//编辑器调用图片的地址
 7         UE.getEditor(‘contents‘);//里面的contents是我的textarea的id值
 8
 9         }
10
11 </script>

然后再引入2个js文件,分别是:1、ueditor.all.min.js 2、ueditor.config.js
在这里申明一下 我以上说的调用方式,顺序绝对不能乱,乱了就会出问题了,所以你就按照我的按部就班的做吧!

因为我重写了编辑器的图片提交地址,所以我还得在控制器里面写一个对图片处理的方法。
代码如下:

 1 //改变Ueditor 默认图片上传路径
 2         public function checkPic(){
 3             import(‘ORG.Net.UploadFile‘);
 4              $upload = new UploadFile();// 实例化上传类
 5              $upload->allowExts  = array(‘jpg‘, ‘gif‘, ‘png‘, ‘jpeg‘);// 设置附件上传类型
 6              $upload->autoSub =true ;
 7              $upload->subType =‘date‘ ;
 8              $upload->dateFormat =‘ym‘ ;
 9              $upload->savePath =  ‘./Uploads/thumb/‘;// 设置附件上传目录
10              if($upload->upload()){
11                  $info =  $upload->getUploadFileInfo();
12                  echo json_encode(array(
13                    ‘url‘=>$info[0][‘savename‘],
14                    ‘title‘=>htmlspecialchars($_POST[‘pictitle‘], ENT_QUOTES),
15                    ‘original‘=>$info[0][‘name‘],
16                    ‘state‘=>‘SUCCESS‘
17                  ));
18               }else{
19                  echo json_encode(array(
20                   ‘state‘=>$upload->getErrorMsg()
21                  ));
22                      }
23
24             }

我首先给大家看看代码先,在继续说明,
1、引入tp官方的文件上传处理类,然后初始化一些配置,这些都不介绍了啊!
2、判断他是否上传成功了,如果上传成功了,就先获取他的上传成功的信息,然后把数组转成json,用phpjson_encode。如果上传失败就把上传失败的信息直接返回!

以上都是在黄永成老师教程里面已经说明了的!就不详细说明了,不懂的就去看视频!

在整合好了上传后,发现上传的图片路径被转义了,一直显示不出来如图:

我就在显示出数据的哪里用反转义函数,进行操作了一下{$article.content|stripslashes}这样就是把转义的字符串进行反转义,这样数据就能正常显示了
如图:

然后在前台模版显示数据的时候不仅要反转义还要去掉html实体化,{$article.content|htmlspecialchars_decode|stripslashes}这样就能正常显示了!

还有哟个问题,百度编辑器当里面的内容增长时,他的高度也是增长的,如图:

解决方案就是在Ueditor的配置文件ueditor.config.js,里面的第428行打开注释,改成true,还有430行注释打开把他改成你初始化的的高度对应就好了。如图:

这样编辑器就不会撑高了!如图:

完结!!! 说的不好的大神勿喷~~这个只是分享交流,如果说错了 指出来就行了 谢谢~~~

补充说明:关于Ueditor在ie7下面调用不出来的bug问题解决办法,这个是前天逛官网的时候,发现一个人的这个问题的,因为我只有人见人爱的ie6,也都没有去测试,所以还是别人提醒,现在更正一下ie7的bug解决方案~感谢这位大湿啊~
如图:

时间: 2024-11-13 06:42:15

ThinkPHP整合百度Ueditor的相关文章

ThinkPHP整合百度Ueditor图文教程

ThinkPHP整合百度Ueditor图文教程 ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOME_URL 他在教程里面已经说了的,我就不再次说了啊,就一笔带过,好了不废话! 在调用编辑器的时候首先先初始化一些值: <script type="text/javascript" charset="utf-8"> window.UEDITOR_HOME_U

Thinkphp整合最新Ueditor编辑器

说到最新的富文本编辑器的确不少(ckeditor.fkeditor.ueditor),这些富文本编辑器如果单独使用基本上很方便,不需要做额外的配置,只要把官方的插件下载下来放到一个web容器中,看看 插件中提供的 index.html 里的代码就明白应该怎么调用了.因为富文本编辑器会经常涉及到文件.图片.视频资源的上传,如果本身所用到的框架或者是项目本身就有一个模块是专门来处理这一块儿的,对一些资源需要做特殊处理的,例如水印处理,对图片的大小处理(原图.缩略图),那么就设计到把富文本编辑器与你现

spring boot 整合 百度ueditor富文本

百度的富文本没有提供Java版本的,只给提供了jsp版本,但是呢spring boot 如果是使用内置tomcat启动的话整合jsp是非常困难得,今天小编给大家带来spring boot整合百度富文本需要做哪些 1.先将百度提供的demo和js导入项目中 2.编写html 这步创建好了编辑器然后我们会发现图片不能上传 出现这个问题之后我们去config.json里面修改 ueditor.config.js修改 去编写ueditor.config.js指向的controller 然后去重写百度的放

dedecms整合百度编辑器(Ueditor)之上传图片加水印的办法

Ueditor抓取远程图片加水印方法 打开getRemoteImage.php, 找到://远程抓取图片配置 在上面添加: require_once('../../../dede/config.php');//dede为你的后台目录 require_once(DEDEADMIN."/inc/inc_archives_functions.php"); 继续修改getRemoteImage.php, 找到: fwrite( $fp2 , $img ); 在下面添加: @WaterImg($

thinkphp 对百度编辑器里的内容进行保存

模板代码 <!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>ueditor demo</title> </head> <body> <!-- 加载编辑器的容器 --> <script id="container" name="co

ThinkPHP下使用Ueditor

在做课程设计的时候想到用百度的Ueditor,可在配置的时候出现了一些问题 Ueditor感觉不是很难,以前有个人定制的,现在取消了这项服务,但是我们可以自己进行配置 下载地址:http://ueditor.baidu.com/website/download.html#ueditor 下载好文件后,把文件解压,把文件里的所有文件放到项目下的Public文件下, 因为我们在很多地方都需要使用编辑器,所以放在Public下方便使用 在<head>--</head>下添加如下代码 ?

百度Ueditor编辑器的使用

百度Ueditor编辑器  开发版  PHP 在thinkphp中的Index/index.html文件代码: 1 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 2 <html lang="en"> 3 <head> 4 <meta http-equiv="Co

PHP如何搭建百度Ueditor富文本编辑器

本文为大家分享了PHP搭建百度Ueditor富文本编辑器的方法,供大家参考,具体内容如下 下载UEditor 官网:下载地址 将下载好的文件解压到thinkphp项目中,本文是解压到PUBLIC目录下并改文件夹名称为ueditor 第一步 引入javascript 在html中如入下面的js语句引入相关文件 ? 1 2 <script type="text/javascript" charset="utf-8" src="__PUBLIC__/ued

百度ueditor 实例化 Cannot set property &#39;innerHTML&#39; of null 完美解决方案

此时此刻,我正在用博客园推荐的TinyMCE编辑器写这个博客,突然想起最近在项目中使用百度ueditor编辑器中的一些经历.所以记录在此,与大家分享. 不得不说,百度ueditor是一款很好的在线编辑器,为开发者提供了诸多便利,你甚至可以用它来把word文档的内容按照一定的格式转换成html代码,然后再放进自己的项目中. 1.我们的项目中,用户在注册时有可能需要查看用户协议和隐私协议,而我们的文案是将这两个协议的内容放在word文档中,作为苦逼的开发人员,你需要把这些文字展示在html页面上,并