Ueditor 1.4.3.1 使用 ThinkPHP 3.2.3 的上传类进行图片上传

在 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;
        }
    }
}
时间: 2024-08-28 01:55:11

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

使用ThinkPHP上传类处理KindEditor上传的图片

KindEditor作为一款可视化的HTML编辑器用起来确实比较方便,其本身也自带了图片上传的处理这里修改为TP上传处理图片,是为了保证上传图片的方便(目录独立于编辑器,便于增加水印等处理) 第一步:在模板html页面引入如下文件: <link rel="stylesheet" href="/data/editor/plugins/code/prettify.css" /> <script charset="utf-8" src

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

今天项目中需要自定义图片上传的保存路径,并且不需要按照日期自动创建存储文件夹和文件名,我的ueditor版本是1.3.6.下面记录一下我配置成功的方法,如果有什么不对的地方欢迎指出,共同学习: 1:我在本地项目的根目录下新建一个文件夹,比如:upload. 2:打开ueditor/php/config.php,改成如下代码后保存: <?php return array( //图片上传允许的存储目录 /*'imageSavePath' => array ( 'upload1', 'upload2

百度UEditor图片上传、SpringMVC、Freemarker、Tomcat、Nginx、静态资源

个人官网.公司项目都需要 可视化编辑器,百度UEditor做得很不错,就用的这个.项目后台用到了SpringMVC.Freemarker,开发过程中部署在Jetty,线上部署用Tomcat,最后可能配置Nginx代理.     在实际使用过程中,遇到了太多的问题,因此有必要梳理和总结下. 1. 先说百度UEditor在Java环境中的使用:1.1   Html页面或者Freemarker模版里,引入百度UEditor的相关JS和CSS,如下 <script type="text/javas

ueditor图片上传配置

ueditor图片上传配置文件为ueditor/php/config.json /* 上传图片配置项 */ "imageActionName": "uploadimage", /* 运行上传图片的action名称 */ "imageFieldName": "upfile", /* 提交的图片表单名称 */ "imageMaxSize": 2048000, /* 上传限制大小,单位B */ "ima

ueditor使用-图片上传正常,图片显示异常404

做个小项目,用到了ueditor,其中需要在ueditor中上传图片. 问题症状: 点击上传图片的按钮后选择图片,上传到了目的文件夹,但是显示不了,f12查看也是404.后来发觉显示图片时路径不对. 解决方案: 翻看官网文档,找到了个博客:http://popozhu.github.io/2014/07/03/ueditor%E5%9B%BE%E7%89%87%E4%B8%8A%E4%BC%A0%E8%B7%AF%E5%BE%84%E9%85%8D%E7%BD%AE/ 说的还蛮详细.找了下原因,

ueditor单独调用上传附件和图片的功能

javascript富文本编辑器使我们添加.编辑网站中的文章更加方便和容易.这些富文本编辑器提供了所见即所得(What You See Is What You Get - WYSIWYG)的功能,可以像编辑word文档一样,方便地编辑网站中文章,常用于内容管理系统和博客系统等. 百度Ueditor富文本就是其中之一,个人觉得虽然体积大点,不兼容移动端外,其他功能都非常强大,特别是里面的多图上传! 当有些个性化页面需求时,难免会对她一些优化,已让她适合自己的内容,比如单独调用上传图片实现类似于以下

百度Ueditor 图片上传无反应,显示上传0张,不能点确定

解决办法: \Data\Ueditor\php\Uploader.class.php 190行左右 /** * 获取文件扩展名 * @return string */ private function getFileExt() { date_default_timezone_set("PRC"); return strtolower( strrchr( $this->file[ "name" ] , '.' ) ); } 添加了date_default_tim

百度Ueditor多图片上传控件

发现百度的Ueditor富文本编辑器中的多图片上传控件很不错,于是便想着分享出来使用,费了老劲,少不了无名朋友的帮助,也查了不少资料,终于搞定了 发代码给大家,请大家多多指正 1.首先要在html页面中添加对ueditor的脚本引用 <script src="../js/jquery-1.4.2.min.js" type="text/javascript"></script> <script src="../public/ue

关于thinkphp上传bmp格式图片

thinkphp中上传bmp格式图片,缺少了imagecreatefrombmp()方法和imagebmp()方法, 此方法在simplewind\Core\Library\Think\Image\Driver\Gd.class.php中open()和save时调用到,至于其他地方用到的都是相同的方法. //打开图像open中 if('gif' == $this->info['type']){ $class = 'Think\\Image\\Driver\\GIF'; $this->gif =