ThinkPHP整合百度Ueditor图文教程


Posted in PHP onOctober 21, 2014

ThinkPHP整合百度Ueditor,基于黄永成老师的视频说明的
申明:最好大家都能写绝对路径的都写好绝对路径比如:window.UEDITOR_HOME_URL

他在教程里面已经说了的,我就不再次说了啊,就一笔带过,好了不废话!

在调用编辑器的时候首先先初始化一些值:

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

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

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

代码如下:

//改变Ueditor 默认图片上传路径
    public function checkPic(){
      import('ORG.Net.UploadFile');
       $upload = new UploadFile();// 实例化上传类
       $upload->allowExts = array('jpg', 'gif', 'png', 'jpeg');// 设置附件上传类型
       $upload->autoSub =true ;
       $upload->subType ='date' ;
       $upload->dateFormat ='ym' ;
       $upload->savePath = './Uploads/thumb/';// 设置附件上传目录
       if($upload->upload()){
         $info = $upload->getUploadFileInfo();
         echo json_encode(array(
          'url'=>$info[0]['savename'],
          'title'=>htmlspecialchars($_POST['pictitle'], ENT_QUOTES),
          'original'=>$info[0]['name'],
          'state'=>'SUCCESS'
         ));
       }else{
         echo json_encode(array(
         'state'=>$upload->getErrorMsg()
         ));
           }
 
      }

我首先给大家看看代码先,在继续说明,

1、引入tp官方的文件上传处理类,然后初始化一些配置,这些都不介绍了啊!

2、判断他是否上传成功了,如果上传成功了,就先获取他的上传成功的信息,然后把数组转成json,用phpjson_encode。如果上传失败就把上传失败的信息直接返回!

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

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

ThinkPHP整合百度Ueditor图文教程

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

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

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

ThinkPHP整合百度Ueditor图文教程

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

ThinkPHP整合百度Ueditor图文教程

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

ThinkPHP整合百度Ueditor图文教程

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

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

ThinkPHP整合百度Ueditor图文教程

PHP 相关文章推荐
IIS环境下快速安装、配置和调试PHP5.2.0
Dec 17 PHP
开发大型 PHP 项目的方法
Jan 02 PHP
php中http_build_query 的一个问题
Mar 25 PHP
PHP sprintf() 函数的应用(定义和用法)
Jun 29 PHP
php学习笔记之面向对象编程
Dec 29 PHP
深入php中var_dump方法的使用详解
Jun 24 PHP
使用php伪造referer的方法 利用referer防止图片盗链
Jan 20 PHP
php无限分类使用concat如何实现
Nov 05 PHP
PHP面向对象程序设计高级特性详解(接口,继承,抽象类,析构,克隆等)
Dec 02 PHP
详谈PHP面向对象中常用的关键字和魔术方法
Feb 04 PHP
Laravel5.4框架使用socialite实现github登录的方法
Mar 20 PHP
php模拟post提交请求调用接口示例解析
Aug 07 PHP
浅谈PHP正则表达式中修饰符/i, /is, /s, /isU
Oct 21 #PHP
php读取目录及子目录下所有文件名的方法
Oct 20 #PHP
php中的字符编码转换函数用法示例
Oct 20 #PHP
PHP实现通过中文字符比率来判断垃圾评论的方法
Oct 20 #PHP
php的ZipArchive类用法实例
Oct 20 #PHP
php自定义apk安装包实例
Oct 20 #PHP
php防止站外远程提交表单的方法
Oct 20 #PHP
You might like
浅谈Windows下 PHP4.0与oracle 8的连接设置
2006/10/09 PHP
一个用于MySQL的PHP XML类
2006/10/09 PHP
怎样在php中使用PDF文档功能
2006/10/09 PHP
PHP使用trim函数去除字符串左右空格及特殊字符实例
2016/01/07 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
JS读取cookies信息(记录用户名)
2012/01/10 Javascript
JavaScript面向对象之Prototypes和继承
2012/07/12 Javascript
javascript 判断中文字符长度的函数代码
2012/08/27 Javascript
关于javascript中的typeof和instanceof介绍
2012/12/04 Javascript
javascript进行数组追加方法小结
2014/06/16 Javascript
angularjs中的e2e测试实例
2014/12/06 Javascript
js中flexible.js实现淘宝弹性布局方案
2020/06/23 Javascript
AngularJS转换响应内容
2016/01/27 Javascript
jQuery短信验证倒计时功能实现方法详解
2016/05/25 Javascript
Bootstrap3制作搜索框样式的方法
2016/07/11 Javascript
微信小程序 WebSocket详解及应用
2017/01/21 Javascript
JavaScript实现简单精致的图片左右无缝滚动效果
2017/03/16 Javascript
JavaScript实现经纬度转换成地址功能
2017/03/28 Javascript
基于vue组件实现猜数字游戏
2020/05/28 Javascript
加载 vue 远程代码的组件实例详解
2017/11/20 Javascript
在vue项目中使用Nprogress.js进度条的方法
2018/01/31 Javascript
nodejs实现的简单web服务器功能示例
2018/03/15 NodeJs
js中获取URL参数的共用方法getRequest()方法实例详解
2018/10/24 Javascript
python写的ARP攻击代码实例
2014/06/04 Python
django 将model转换为字典的方法示例
2018/10/16 Python
python用post访问restful服务接口的方法
2018/12/07 Python
python超时重新请求解决方案
2019/10/21 Python
Python如何实现FTP功能
2020/05/28 Python
需要知道的CSS3动画技术
2010/01/01 HTML / CSS
简单的HTML5初步入门教程
2015/09/29 HTML / CSS
Java的for语句中break, continue和return的区别
2013/12/19 面试题
西式婚礼证婚词
2014/01/12 职场文书
美德好少年事迹材料
2014/01/19 职场文书
毕业寄语大全
2014/04/09 职场文书
二年级数学教学反思
2016/02/16 职场文书
深入理解以DEBUG方式线程的底层运行原理
2021/06/21 Java/Android