第一步:在模板html页面引入如下文件:
<link rel="stylesheet" href="/data/editor/plugins/code/prettify.css" />
<script charset="utf-8" src="/data/editor/kindeditor.js"></script>
<script charset="utf-8" src="/data/editor/lang/zh_CN.js"></script>
<script charset="utf-8" src="/data/editor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
var editor1 = K.create('textarea[name="content"]', {
cssPath : '/data/editor/plugins/code/prettify.css',
uploadJson : "/Home/Common/upload",//图片上传后的处理地址
})
prettyPrint()
})
</script>
路径根据自己的项目不同,正确引入即可,uploadJson :
"/Home/Common/upload",
uploadJson后面的就是编辑器上传图片的处理地址,可以根据自己的自行配置
这里交由Home分组的Common控制器的upload方法处理图片上传
第二步:自定义上传处理函数
function upload(){
header("Content-Type:text/htmlcharset=utf-8")
import('ORG.Net.UploadFile')
$upload = new UploadFile()
$upload->maxSize = 3145728
$upload->allowExts = array('jpg', 'gif', 'png', 'jpeg')
$upload->autoSub=true
$upload->subType='date'
$upload->dateFormat='Ym'
$upload->savePath = './upload/article/'
if(!$upload->upload()){
$error['error']=1
$error['message']=$upload->getErrorMsg()
exit(json_encode($error))
}
$info=$upload->getUploadFileInfo()
/*图片水印处理
import('ORG.Util.Image')
$image = new Image()
$image->water($upload->savePath.$info[0]['savename'],'./data/water.png')*/
$data=array(
'url'=>str_replace('./','/',$upload->savePath).$info[0]['savename'],
'error'=>0
)
exit(json_encode($data))
}
这里使用ThinkPHP的上传类处理图片上传,也可以自己写,唯一需要注意的就是返回的格式
查看了下官方的文档:
上传正确返回这种JSON串
{
"error" : 0,
"url" :
"http://www.example.com/path/to/file.ext"
}
上传失败返回这种JSON串
{
"error" : 1,
"message" :
"错误信息"
}
特别需要注意的一点就是返回的error一定要用整数1或是0,别用字符串'1'或'0'
原因是plugins/image/image.js的结果判断是
恒等于 ===
(当初自己就是因为PHP端返回的是字符串形式的'0'不等于整数的0导致上传之后总是弹窗报错)。
<html><head>
<meta http-equiv="Content-Type" content="text/htmlcharset=gb2312">
<link href="images/Admin_css.css" type=text/css rel=stylesheet>
<link rel="stylesheet" href="../KindEditor/themes/default/default.css" />
<link rel="stylesheet" href="../KindEditor/plugins/code/prettify.css" />
<script charset="utf-8" src="../KindEditor/kindeditor.js"></script>
<script charset="utf-8" src="../KindEditor/lang/zh_CN.js"></script>
<script charset="utf-8" src="../KindEditor/plugins/code/prettify.js"></script>
<script>
KindEditor.ready(function(K) {
var editor = K.create('textarea[name="content"]', {
cssPath : '../KindEditor/plugins/code/prettify.css',
uploadJson : '../KindEditor/upload_json.asp',
allowFileManager : true,
afterCreate : function() {
var self = this
K.ctrl(document, 13, function() {
self.sync()
K('form[name=example]')
[0].submit()
})
K.ctrl(self.edit.doc, 13, function() {
self.sync()
K('form[name=example]')
[0].submit()
})
}
})
prettyPrint()
})
</script>
....中间省略
<tr>
<td height="24" align="right" valign="top">内容:<br>
<td>
<textarea id="content_1" name="content"
style="width:700pxheight:300pxvisibility:hidden"></textarea></td>
</tr>
<tr>
<td height="24" align="right">点 击 数:</td>
<td colspan=4><input name="Hits" type="text" class="textfield" style="WIDTH: 40"
value="<%if Hits="" then response.write ("1") else response.Write(""&Hits&"") end if %>"
maxlength="40">
发布时间:<input class="textfield" name="AddTime" value="<%=now()%>"
type="text"/>
<tr>
<tr>
<td height="30" align="right"></td>
<td valign="bottom"><input name="submitSaveEdit" type="submit" class="button"
id="submitSaveEdit" value="保存" style="WIDTH: 80" ></td>
</tr>
<tr>
<td height="24" align="right"></td>
<td valign="bottom"></td>
</tr>
</table></td>
</tr>
</form>
</table>
</BODY>
</HTML>
<%
sub InfoEdit()
dim Action,rsRepeat,rs,sql,Ecount
Action=request.QueryString("Action")
if Action="SaveEdit" then '保存编辑作品
set rs = server.createobject("adodb.recordset")
if len(trim(request.Form("content")))<1 then
response.write ("<script language=javascript>alert('内容为必填项目!')history.back(-
1)</script>")
response.end
end if
为什么一直提示"内容为必填项目!"
if (!savefile.getParentFile().exists()) {
savefile.getParentFile().mkdirs()
try {
FileUtils.copyFile(imgFile, savefile)
map.put("error", 0)
map.put("url", savefile)
JSONObject json = JSONObject.fromObject(map)
response.getOutputStream().print(json.toString())
} catch (IOException e) {
e.printStackTrace()
}
} else {
try {
FileUtils.copyFile(imgFile, savefile)
map.put("url", savefile)
map.put("error", 0)
JSONObject json = JSONObject.fromObject(map)
System.out.println(json)
response.getOutputStream().print(json.toString())
} catch (IOException e) {
} else {
map.put("error", 1)
map.put("message", "上传失败")
JSONObject json = JSONObject.fromObject(map)
try {
response.getOutputStream().print(json.toString())
} catch {
DeBug运行到JSONObject json = JSONObject.fromObject(map)就会进入DefaultActionInvocation.class,
kindeditor报的错误信息
type Exception report
message There is a cycle in the hierarchy!
description The server encountered an internal error that prevented it from fulfilling this request.
exception
net.sf.json.JSONException: There is a cycle in the hierarchy!