欢迎光临
屌丝博客

百度编辑器(UEditor)开发教程——调用上传图片、上传文件等模


                本文摘自 稻壳互联 http://www.dookay.com/n/10929

出于兴趣爱好,前段时间自己尝试写了一个PHP的网站管理后台,其中用到了百度ueditor编辑器,发现它的多图片上传模块很不错,用起来很方便,又可以选择已经上传好的图片。正好我又是个懒人,发现有现成的自己就不想新开发了。于是我就想,是不是可以调用这个上传模板为自己所用呢?

说到百度富文本编辑器ueditor(下面简称ue),我不得不给它一个大大的赞。我们稻壳互联在网站建设、前端开发时,网站的内容管理就使用了它。对于它的多图片上传和附件上传,个人感觉很好用,我就琢磨着是否可以外部调用多图上传和附件上传组件为自己所用,并封装成一个插件,节省单独开发的成本。

有了这个想法后,着手操作,理下实现思路,得出实现的关键在于监听这两个组件在编辑器里的插入动作。打开源码,苦心研究,皇天不负苦心人,终于摸索出解决方法,现在分享出来,给拥有同样想法的小伙伴,为网站建设届尽一份力。

注:本文基于UEditor1.4.3.3版本。

客户端

1、引入ue相关文件,写好初始代码

为了更好的封装整一个单独的插件,这里我们要做到示例化ue后隐藏网页中的编辑窗口,并移除焦点。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部调用UEditor的多图上传和附件上传</title>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
    <style>
            ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
            li{list-style-type: none;margin: 5px;padding: 0;}
        </style>
</head>
<body>
<h1>外部调用UEditor的多图上传和附件上传示例</h1>
<button type="button" id="j_upload_img_btn">多图上传</button>
<ul id="upload_img_wrap"></ul>
<button type="button" id="j_upload_file_btn">附件上传</button>
<ul id="upload_file_wrap"></ul>
<!-- 加载编辑器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea>
<!-- 使用ue -->
<script type="text/javascript">
    // 实例化编辑器,这里注意配置项隐藏编辑器并禁用默认的基础功能。
 var uploadEditor = UE.getEditor("uploadEditor", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled:false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled:true,
        toolbars: [["insertimage", "attachment"]]
    });
    // todo::some code
</script>
</body>
</html>

2、监听多图上传和上传附件组件的插入动作

uploadEditor.ready(function () {
    // 监听插入图片
    uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
    // 监听插入附件
    uploadEditor.addListener("afterUpfile",_afterUpfile);
});

3、自定义按钮绑定触发多图上传和上传附件对话框的事件

我们对id="j_upload_img_btn"和id="j_upload_file_btn"的两个button绑定触发ue多图上传和上传附件对话框的事件,这样我们才能够操作ue。

document.getElementById('j_upload_img_btn').onclick = function () {
    var dialog = uploadEditor.getDialog("insertimage");
    dialog.title = '多图上传';
    dialog.render();
    dialog.open();
};
document.getElementById('j_upload_file_btn').onclick = function () {
    var dialog = uploadEditor.getDialog("attachment");
    dialog.title = '附件上传';
    dialog.render();
    dialog.open();
};

3、多图上传

多图上传的核心在于“beforeInsertImage”动作,此动作返回已选图片的信息集合。

function _beforeInsertImage(t, result) {
    var imageHtml = '';
    for(var i in result){
        imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
    }
    document.getElementById('upload_img_wrap').innerHTML = imageHtml;
}

4、新增“afterUpfile”动作

对于附件上传,ue源码中并未提供插入动作的相关事件,所以这里我们手动添加一个触发动作“afterUpfile”。

打开“ueditor.all.js”,搜索代码:

me.execCommand('insertHtml', html);

在此代码后插入代码:

me.fireEvent('afterUpfile', filelist);

这样我们就新增了“afterUpfile”事件。

blob.png

这里核心在于 “fireEvent”。

5、附件上传

上一步中我们新增了“afterUpfile”动作,这里直接监听就可以了。

function _afterUpfile(t, result) {
    var fileHtml = '';
    for(var i in result){
        fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
    }
    document.getElementById('upload_file_wrap').innerHTML = fileHtml;
}

以下是完整代码:

注:本文基于UEditor1.4.3.3版本。

<!doctype html>
<html>
<head>
    <meta charset="UTF-8">
    <title>外部调用UEditor的多图上传和附件上传</title>
    <script type="text/javascript" charset="utf-8" src="ueditor.config.js"></script>
    <script type="text/javascript" charset="utf-8" src="ueditor.all.js"></script>
    <style>
        ul{display: inline-block;width: 100%;margin: 0;padding: 0;}
        li{list-style-type: none;margin: 5px;padding: 0;}
    </style>
</head>
<body>
<h1>外部调用UEditor的多图上传和附件上传示例</h1>
<button type="button" id="j_upload_img_btn">多图上传</button>
<ul id="upload_img_wrap"></ul>
<button type="button" id="j_upload_file_btn">附件上传</button>
<ul id="upload_file_wrap"></ul>
<!-- 加载编辑器的容器 -->
<textarea id="uploadEditor" style="display: none;"></textarea>
<!-- 使用ue -->
<script type="text/javascript">
    // 实例化编辑器,这里注意配置项隐藏编辑器并禁用默认的基础功能。
 var uploadEditor = UE.getEditor("uploadEditor", {
        isShow: false,
        focus: false,
        enableAutoSave: false,
        autoSyncData: false,
        autoFloatEnabled:false,
        wordCount: false,
        sourceEditor: null,
        scaleEnabled:true,
        toolbars: [["insertimage", "attachment"]]
    });
    // 监听多图上传和上传附件组件的插入动作
 uploadEditor.ready(function () {
        uploadEditor.addListener("beforeInsertImage", _beforeInsertImage);
        uploadEditor.addListener("afterUpfile",_afterUpfile);
    });
    // 自定义按钮绑定触发多图上传和上传附件对话框事件
 document.getElementById('j_upload_img_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("insertimage");
        dialog.title = '多图上传';
        dialog.render();
        dialog.open();
    };
    document.getElementById('j_upload_file_btn').onclick = function () {
        var dialog = uploadEditor.getDialog("attachment");
        dialog.title = '附件上传';
        dialog.render();
        dialog.open();
    };
    // 多图上传动作
 function _beforeInsertImage(t, result) {
        var imageHtml = '';
        for(var i in result){
            imageHtml += '<li><img src="'+result[i].src+'" alt="'+result[i].alt+'" height="150"></li>';
        }
        document.getElementById('upload_img_wrap').innerHTML = imageHtml;
    }
    // 附件上传
 function _afterUpfile(t, result) {
        var fileHtml = '';
        for(var i in result){
            fileHtml += '<li><a href="'+result[i].url+'" target="_blank">'+result[i].url+'</a></li>';
        }
        document.getElementById('upload_file_wrap').innerHTML = fileHtml;
    }
</script>
</body>
</html>

服务端

从ue官网下载的示例中已经包含了服务端处理的示例代码,这里我们使用php作服务端支持。想快速搭建环境的前端开发的小伙伴,可以下载安装“xampp”,快速搭建php运行环境,如果有80端口冲突请点击这里

如果想使用自己的上传组件你需要做以下两步操作:

1、打开“ueditor.config.js”文件,找到“serverUrl”,配置成你自己上传url

, serverUrl: URL + "php/controller.php"

2、服务端处理并返回对于数据

ue使用统一请求接口路径,会传递到服务端一个action参数,通过action参数来识别操作:

  1. config 获取上传配置,具体返回的配置参数请参照“ueditor-1.4.33/php/config.json”文件。

  2. uploadimage 上传图片

  3. uploadscrawl 上传涂鸦

  4. uploadvideo 上传视频

  5. uploadfile 上传文件

  6. listimage 列出图片,用于“多图上传-在线管理”

  7. listfile 列出文件,用于“附件上传-在线附件”

  8. catchimage 抓取远程文件

服务端返回状态

错误示例

return json_encode(array(     'state'=> '请求地址出错' ));

成功示例

return json_encode(array(     "state" => "SUCCESS" ));

以下是各个action操作对于返回的数据格式

// config
具体返回的配置参数请参照“ueditor-1.4.33/php/config.json”文件。
// uploadimage
// uploadscrawl
// uploadvideo
// uploadfile
array(
    "state" => "",          //上传状态,上传成功时必须返回"SUCCESS"
    "url" => "",            //文件地址
    "title" => "",          //新文件名
    "original" => "",       //原始文件名
    "type" => ""            //文件类型
    "size" => "",           //文件大小
)
// listimage
// listfile
array(
    "state" => "SUCCESS",
    "list" => array(
        array(
            "url"=>"", //文件地址
            "mtime"=>"" // 上次文件的修改时间(可选)
        ),
        ……
    ),
    "start" => $_GET['start']?:0, // 用于分页 
    "total" => 100 // 文件总数,
)
//catchimage
array(
    'state'=> 'SUCCESS'或者'ERROR',
    'list'=> array(
        array(
            "state" => "",  //上传状态,上传成功时必须返回"SUCCESS"
            "url" => "", // 文件地址
            "size" => "", // 文件大小
            "title" => "", // 新文件名
            "original" => "", // 原始文件名
            "source" => "" // 远程资源地址
        ),
        ……
    )
)