• 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="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

  • 相关阅读:
    JavaScript遍历表单元素
    JavaScript实现按钮改变网页背景色
    JavaScript实现指定格式字符串表单校验
    jQuery实现数字时钟
    Python使用递归绘制谢尔宾斯基三角形
    Python使用函数模拟“汉诺塔”过程
    Python使用函数实现杨辉三角
    CSS简单样式练习(七)
    CSS简单样式练习(六)
    cstring to char *例子
  • 原文地址:https://www.cnblogs.com/xynetstudio/p/7278585.html
Copyright © 2020-2023  润新知