ThinkPHP整合Kindeditor多图处理示例

浏览:19031 最后更新:2014-06-11 14:52 分类:示例 关键字: 编辑器整合 多图上传 多图处理
准备工作:
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
评论( 相关
后面还有条评论,点击查看>>