ThinkPHP整合Kindeditor多图处理示例

准备工作：
1、下载kindeditor（www.kindeditor.net），并解压至app/Public/kindeditor目录。
2、将kindeditor/php/upload_json.php文件第15-18行稍加更改

//文件保存目录路径
$save_path = $php_path . '../../upload/';
//文件保存目录URL
$save_url = $php_url . '../../upload/';

目的是将上传的文件存放于app/Public/upload目录下，这样普通环境没问题，sae环境下文件会上传至storage中，不会占用应用程序的空间。

3、引入相关文件

<link rel="stylesheet" href="__PUBLIC__/kindeditor/themes/default/default.css" />
<script charset="utf-8" src="__PUBLIC__/kindeditor/kindeditor-min.js"></script>
<script charset="utf-8" src="__PUBLIC__/kindeditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="__PUBLIC__/kindeditor/jquery-1.9.1.min.js"></script>

4、建立模板，大致如下，注意示例中是提交到同一地址的。表单中有两个select项需要留意：firstimage和images。其中，images为不可见元素（但不影响提交到后台），图片上传完成后，会将地址如数追加至此ID下并设置为全部选中状态。

<form action="{:U('index')}" method="post">

    标题：<input type="text" name="title" />
    <br />
    内容：<textarea name="content" style="width:800px;height:400px;visibility:hidden;"></textarea>
    <br />
    标题图片：<select type="mutiple" name="firstimage" id="firstimage">
        <option value="">请选择</option>
    </select>
    <br />
    <label for="images" style="display:none">
        <select name="images[]" multiple="multiple" id="images">
    </select></label>
    <input type="submit" value="保存添加" />

</form>

 

5、在模板文件中写入JS代码，大致如下：注意afterUpload的调用，此处为全局关键点

$(function(){
    var editor;
    KindEditor.ready(function(K) {
        editor = K.create('textarea[name="content"]', {
            allowFileManager : true,
            autoHeightMode : true,
            afterCreate : function() {
                this.loadPlugin('autoheight');
            },
            afterUpload : function(url) {
                var firstimageoption = '<option value="' + url + '">' + url + '</option>';
                var selectoption = '<option value="' + url + '" selected="selected">' + url + '</option>';
                $("#firstimage").append(firstimageoption);
                $("#images").append(selectoption);
            }
        });
    });
})

6、测试结果：

7、温馨提醒：（1）后台部分请自行处理；
（2）事实上，如果上传了附件，附件地址也会一并提交后台，存放位置app/Public/upload/file。处理附件也方便了！：）
----------------------------------------------------------------附件及以下地址为懒人包----------------------------------
http://pan.baidu.com/share/link?shareid=3261703583&uk=554464104