博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传
阅读量:4559 次
发布时间:2019-06-08

本文共 3548 字,大约阅读时间需要 11 分钟。

在 ThinkPHP 3.2.3 中集成百度编辑器最新版 Ueditor 1.4.3.1,同时将编辑器自带的上传类替换成 ThinkPHP 3.2.3 中的上传类。

 

① 下载编辑器(下载地址:),解压后放入项目根目录的 Data 目录并且将解压出来的目录重命名为 ueditor。

项目中的控制器 ./Application/Admin/Controller/BlogController.class.php 和 视图 ./Application/Admin/View/Blog_add_blog.html 分别是添加博客文章的控制器和视图。

 

② 在 Blog_add_blog.html 中引入编辑器的配置文件 ./Data/ueditor/ueditor.config.js 和 编辑器的类库文件 ./Data/ueditor/ueditor.all.min.js

 

③ 在 Blog_add_blog.html 中,用于填写文章的文本域:

因此需要在视图文件的 js 中进行设置,根据默认文本域的 id 将文本域替换成百度编辑器:

 

同时可以对编辑器的其他配置进行设置,例如:

window.onload = function() {            window.UEDITOR_CONFIG.initialFrameWidth = 750; //初始化编辑器宽度            window.UEDITOR_CONFIG.initialFrameHeight = 200;  //初始化编辑器高度                     UE.getEditor('content');        }

 

④ 根据浏览器的开发者工具可以看到在上传图片时请求的地址是 ./Data/ueditor/php/controller.php,参数 action = uploadimage

controller.php 是服务器统一请求接口路径,在 line 9 ~ line 23 中如果请求的参数 action = uploadimage 时,则

$result = include("action_upload.php");

 

在 action_upload.php 中包含了上传的配置选项,并且包含了 Uploader.class.php 文件

Uploader.class.php 文件是 ueditor 的上传类文件。

 

因此如果需要自定义上传类,只需要自定义请求地址即可(把 controller.php 替换成自己的地址),根据文档中  的说明,由于所有ueditor请求都通过editor对象的getActionUrl方法获取请求地址,可以直接通过复写这个方法实现在视图文件,只需要 ./Application/Admin/View/Blog_add_blog.html 的 js 中添加上:

UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;            UE.Editor.prototype.getActionUrl = function(action) {                if (action == 'uploadimage') {    //上传图片                      return "{:U('Admin/Blog/upload',array('action'=>'uploadimage'),'')}";                } else  if(action == 'config') {    //加载配置                        return this._bkGetActionUrl.call(this, action);                }            }

 

视图文件完整的 js:

 

⑤ 在控制器的 upload 方法中,只需要对 ./Data/ueditor/controller.php 中的方法进行修改:

subName = array('date', 'Ym');//子目录创建方式 //上传 $info = $upload->upload(); //p($info);//上传信息 if($info) { /** * 得到上传文件所对应的各个参数,数组结构 * array( * "state" => "", //上传状态,上传成功时必须返回"SUCCESS" * "url" => "", //返回的地址 * "title" => "", //新文件名 * "original" => "", //原始文件名 * "type" => "" //文件类型 * "size" => "", //文件大小 * ) */ $arr = array( 'state'=>'SUCCESS', 'url'=>'http://'.$_SERVER['SERVER_NAME'].'/Uploads/'.$info['upfile']['savepath'].$info['upfile']['savename'], 'title'=>$info['upfile']['savename'], 'original'=>$info['upfile']['name'], 'type'=>$info['upfile']['ext'], 'size'=>$info['upfile']['size'] ); //print_r($arr); /* 返回数据 */ $result = json_encode($arr); } else { $arr = array('state'=>$upload->getError()); } //图片上传结束 } elseif('config' == $action) { //加载配置 $result = json_encode($CONFIG); } /* 输出结果 */ if (isset($_GET["callback"])) { if (preg_match("/^[\w_]+$/", $_GET["callback"])) { echo htmlspecialchars($_GET["callback"]) . '(' . $result . ')'; } else { echo json_encode(array( 'state'=> 'callback参数不合法' )); } } else { echo $result; } }}

 

转载于:https://www.cnblogs.com/dee0912/p/5186940.html

你可能感兴趣的文章
SVN学习--VisualSVN Server和TortoiseSVN的配置和使用
查看>>
CSS-继承和层叠
查看>>
「雕爷学编程」Arduino动手做(13)——触摸开关模块
查看>>
【u119】中位数
查看>>
【42.86%】【codeforces 742D】Arpa's weak amphitheater and Mehrdad's valuable Hoses
查看>>
Python Pandas分组聚合
查看>>
Thymeleaf 学习笔记
查看>>
MAC IP等相关
查看>>
Unable to instantiate prefab. Prefab may be broken.(Unity2018.2.2报错)
查看>>
Java中的TreeMap、Comparable、Comparator
查看>>
无刷新页面分页
查看>>
Mybatis(二)|搭建mybatis环境之注解版-简单搭配
查看>>
4.npm模块安装和使用(axios异步请求,lodash工具库)
查看>>
java的类加载机制816
查看>>
毕业生的未来
查看>>
sqlserver行转列
查看>>
PHP统计数组中所有的值出现的次数
查看>>
用canvas绘制花朵
查看>>
Java 7如期释出 重大功能延至第8版
查看>>
(-2147483648 > 0)?
查看>>