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/li