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

① 下载编辑器(下载地址:http://ueditor.baidu.com/website/download.html),解压后放入项目根目录的 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 中,用于填写文章的文本域:

<textarea name="content" id="content"></textarea>

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

    <script>
window.UEDITOR_HOME_URL = '__ROOT__/Data/ueditor/';
window.onload = function() {
UE.getEditor('content');
}
</script>

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

        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 替换成自己的地址),根据文档中 http://fex.baidu.com/ueditor/#qa-customurl 的说明,由于所有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:

    <!-- ueditor start-->
<script>
window.UEDITOR_HOME_URL = '__ROOT__/Data/ueditor/';
window.onload = function() {
window.UEDITOR_CONFIG.initialFrameWidth = 750; //初始化编辑器宽度
window.UEDITOR_CONFIG.initialFrameHeight = 200; //初始化编辑器高度
//自定义请求地址
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);
}
}
//自定义请求地址结束
UE.getEditor('content');
}
</script>
<script src="__ROOT__/Data/ueditor/ueditor.config.js"></script>
<script src="__ROOT__/Data/ueditor/ueditor.all.min.js"></script>
<!--ueditor end-->

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

<?php
namespace Admin\Controller;
use Think\Upload; class BlogController extends CommonController{
//上传图片
public function upload() {
date_default_timezone_set("Asia/chongqing");
error_reporting(E_ERROR);
header("Content-Type: text/html; charset=utf-8"); $CONFIG = json_decode(preg_replace("/\/\*[\s\S]+?\*\//", "", file_get_contents("config.json")), true);
$action = $_GET['action'];
if('uploadimage' == $action) { //上传图片
//处理图片上传开始
//实例化上传类
$upload = new Upload();
//配置
$upload->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;
}
}
}

Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传的更多相关文章

  1. ueditor 百度编辑器 自定义图片上传路径和格式化上传文件名

    今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我 ...

  2. ThinkPHP示例:图片上传

    ThinkPHP示例之图片上传,包括图片上传.数据库保存.缩略图生成以及图片水印功能演示.首先需要下载框架核心,然后把示例解压到Web根目录下面,并修改入口文件中的框架入口文件的位置.导入示例目录下面 ...

  3. 百度编辑器前后端二开图片上传Js Thinkphp tp5 ueditor

    百度编辑器图片上传Jsueditor.all.min.js 下载链接 链接:https://pan.baidu.com/s/1VNgw9ELgRRHKeCQheFkQTw 提取码:fnfi 使用方法: ...

  4. uEditor独立图片上传

    项目中.上传图片,非常希望有一款比较兼容的查件. 网上找了一些,图片上传立刻显示的js代码,还有uploadify.都会碰到这样那样的不兼容和其它头疼的问题. 后来想,干脆就用php的上传类最干脆.但 ...

  5. ThinkPHP3.1.3 整合 UEditor百度编辑器 图片上传

    第一步.前端模板实例化百度编辑器 <js file='__ROOT__/Data/UEditor/ueditor.config.js' /> <js file='__ROOT__/D ...

  6. 对百度的UEditor多图片上传的一些补充

    我已经写了一篇文章关于百度的UEditor提取多图片上传模块.如果还没有看过,请点击以下链接查看 http://www.cnblogs.com/luke1006/p/3719029.html 出差了两 ...

  7. THINKPHP源码学习--------文件上传类

    TP图片上传类的理解 在做自己项目上传图片的时候一直都有用到TP的上传图片类,所以要进入源码探索一下. 文件目录:./THinkPHP/Library/Think/Upload.class.php n ...

  8. 百度UEditor在线编辑器的配置和图片上传

    前言 最近在项目中使用了百度UEditor富文本编辑器,配置UEditor过程中遇到了几个问题,在此记录一下解决方案和使用方法,避免以后使用UEditor出现类似的错误. 基本配置 一.下载UEdit ...

  9. 关于editor网页编辑器ueditor.config.js 配置图片上传

    最近公司项目在做一个门户网站,其中新闻和简介等部分使用到了ueditor编辑器,但是上级明确指示需要图片上传这个功能,这时却发现图片上传功能不能正常使用,上传时一直报错,网上收了好几个处理办法,都说的 ...

随机推荐

  1. 二叉搜索树 POJ 2418 Hardwood Species

    题目传送门 题意:输入一大堆字符串,问字典序输出每个字符串占的百分比 分析:二叉搜索树插入,然后中序遍历就是字典序,这里root 被new出来后要指向NULL,RE好几次.这题暴力sort也是可以过的 ...

  2. (转)POJ题目分类

    初期:一.基本算法:     (1)枚举. (poj1753,poj2965)     (2)贪心(poj1328,poj2109,poj2586)     (3)递归和分治法.     (4)递推. ...

  3. iOS UIImageView用代码添加点击事件

    image.userInteractionEnabled = YES; UITapGestureRecognizer *tap = [[UITapGestureRecognizer alloc]ini ...

  4. Codeforces 696D Legen...(AC自动机 + 矩阵快速幂)

    题目大概说给几个字符串,每个字符串都有一个开心值,一个串如果包含一次这些字符串就加上对应的开心值,问长度n的串开心值最多可以是多少. POJ2778..复习下..太弱了都快不会做了.. 这个矩阵的乘法 ...

  5. 【转】推荐UML插件AmaterasUML

    基于Green UML在使用过程中的问题(对于大工程,点击生成类图后不响应),自己只能再次寻找其他的插件.在无意中,发现AmaterasUML. 官方网站:http://amateras.source ...

  6. 20161005 NOIP 模拟赛 T2 解题报告

    beautiful 2.1 题目描述 一个长度为 n 的序列,对于每个位置 i 的数 ai 都有一个优美值,其定义是:找到序列中最 长的一段 [l, r],满足 l ≤ i ≤ r,且 [l, r] ...

  7. HDU 3720 Arranging Your Team(DFS)

    题目链接 队内赛里,匆匆忙忙写的. #include <cstdio> #include <cstring> #include <iostream> #includ ...

  8. VS2010 F5调试时出现:“ 尝试运行项目时出错:未捕获通过反射调用的方法引发的异常”解决

    VS2010 F5调试时出现 尝试运行项目时出错:未捕获通过反射调用的方法引发的异常 两个解决方法:1) 打开项目属性,选择调试选项卡,将“启用非托管代码调试”一项钩上.2) 打开项目属性,选择调试选 ...

  9. 小Experience__要懂得努力

    来到郎沃这么久了,在这里学到了很多,对于一个从未摸过电脑的农村孩子来说,我为自己感到自豪,我不自卑,also.也不会骄傲. 我很清楚的记得爸妈给我说的什么,for myself,for parents ...

  10. Getting the Device GUID

    Sometime you may want to uniquely identify a Windows Phone, such as when you are implementing push n ...