虽说百度Ueditor功能十分丰富,但通常我们用到的不多,而且往往需要自己改造一番,本文以PHP版本的上传图片为例稍加说明。

一、思路分析

通过分析我们可以看到:
上传图片时前端页面调用了/controller.php?action=uploadimage这一接口,而controller.php仅仅是做了一个简单的路由转发,实际上图片上传的处理方法在Uploader.class.php文件中。

<?php
//header('Access-Control-Allow-Origin: http://www.baidu.com'); //设置http://www.baidu.com允许跨域访问
//header('Access-Control-Allow-Headers: X-Requested-With,X_Requested_With'); //设置允许的跨域header
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'];

switch ($action) {
    case 'config':
        $result =  json_encode($CONFIG);
        break;

    /* 上传图片 */
    case 'uploadimage':
    /* 上传涂鸦 */
    case 'uploadscrawl':
    /* 上传视频 */
    case 'uploadvideo':
    /* 上传文件 */
    case 'uploadfile':
        $result = include("action_upload.php");
        break;

    /* 列出图片 */
    case 'listimage':
        $result = include("action_list.php");
        break;
    /* 列出文件 */
    case 'listfile':
        $result = include("action_list.php");
        break;

    /* 抓取远程文件 */
    case 'catchimage':
        $result = include("action_crawler.php");
        break;

    default:
        $result = json_encode(array(
            'state'=> '请求地址出错'
        ));
        break;
}

/* 输出结果 */
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.all.js中找到一个方法getActionUrl可以返回了不同操作对应的接口地址,这样修改起来就很简单了。

/**
 * 根据action名称获取请求的路径
 * @method  getActionUrl
 * @remind 假如没有设置serverUrl,会根据imageUrl设置默认的controller路径
 * @param { String } action action名称
 * @example
 * ```javascript
 * editor.getActionUrl('config'); //返回 "/ueditor/php/controller.php?action=config"
 * editor.getActionUrl('image'); //返回 "/ueditor/php/controller.php?action=uplaodimage"
 * editor.getActionUrl('scrawl'); //返回 "/ueditor/php/controller.php?action=uplaodscrawl"
 * editor.getActionUrl('imageManager'); //返回 "/ueditor/php/controller.php?action=listimage"
 * ```
 */
getActionUrl: function(action){
    var actionName = this.getOpt(action) || action,
        imageUrl = this.getOpt('imageUrl'),
        serverUrl = this.getOpt('serverUrl');

    if(!serverUrl && imageUrl) {
        serverUrl = imageUrl.replace(/^(.*[\/]).+([\.].+)$/, '$1controller$2');
    }

    if(serverUrl) {
        serverUrl = serverUrl + (serverUrl.indexOf('?') == -1 ? '?':'&') + 'action=' + (actionName || '');
        return utils.formatUrl(serverUrl);
    } else {
        return '';
    }
}

二、前端实例化

// 请求转发
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function(action) {
    if (action == 'uploadimage') {
        return '/mycontroller/uploadimage';
    } else {
        return this._bkGetActionUrl.call(this, action);
    }
}

// 关闭抓取
var ue = UE.getEditor('container',{
    initialFrameHeight : 600,
    initialFrameWidth : 1500,
    catchRemoteImageEnable:false,
})

记得将远程抓取图片的功能关闭,否则会在复制粘贴时自动讲一个CDN上的图片抓取保存到本地服务器。

后端接口

主要是处理上传的文件,注意返回的数据格式应与Ueditor接口返回的相同。

$file = $_FILES['upfile'];
if ($_FILES["file"]["error"] == 0) {
    //上传文件到CDN
    $res = array(
        "state"    => "", //上传状态,上传成功时必须返回"SUCCESS"
        "url"      => "", //CDN地址
        "title"    => "", //新文件名
        "original" => "", //原始文件名
        "type"     => "", //文件类型
        "size"     => "", //文件大小
    );
    echo json_encode($res);
}

标签: Ueditor

添加新评论