KindEditor 实现图文上传方法介绍

最新推荐文章于 2024-06-03 14:37:05 发布

最新推荐文章于 2024-06-03 14:37:05 发布 · 283 阅读

文章标签：

#javascript #java #json #ViewUI

本文介绍如何使用KindEditor 3.5.x版本实现本地图片上传功能，详细展示了配置代码及服务器端处理方法，适用于希望增强个人空间图片编辑功能的开发者。

部署运行你感兴趣的模型镜像

此代码是最新版的 KindEditor 3.5.x 实现本地图片上传的方法，用于oschina即将改版的个人空间
KindEditor 要求的JSON格式如下：
{"error":0,"message":".....","url":"/img/1111.gif"}
其中当error值为0时表示上传成功，需要指定url值为图片保存后的URL地址，如果error值不为0，则设置message值为错误提示信息

[代码]首先指定上传处理的URI

 
KE.show({ 

id :'ta_blog_content', 

resizeMode : 1, 

shadowMode :false, 

allowPreviewEmoticons :false, 

urlType :'absolute', 

allowUpload :true,//允许上传图片 

imageUploadJson :'/action/blog/upload_img'//服务端上传图片处理URI 

});

[代码]图片上传处理方法

 
/** 

* 图片上传 

* @param ctx 

* @throws IOException 

*/ 

@Annotation.PostMethod 

@Annotation.JSONOutputEnabled 

publicvoidupload_img(RequestContext ctx)throwsIOException { 

File imgFile = ctx.image("imgFile"); 

if(imgFile.length() > MAX_IMG_SIZE ){ 

ctx.output_json( 

newString[]{"error","message"}, 

newObject[]{1,ResourceUtils.getString("error","file_too_large", MAX_IMG_SIZE/1024)} 

); 

return; 

} 

String uri =newSimpleDateFormat("yyyyMMdd").format(newDate()) 

+"/IMG_" 

+ RandomStringUtils.randomAlphanumeric(4) 

+'_' 

+ String.valueOf(ctx.user().getId()) 

+'.' 

+ FilenameUtils.getExtension(imgFile.getName()).toLowerCase(); 



Multimedia.saveImage(imgFile, img_path + uri,0,0); 

ctx.output_json(newString[]{"error","url"},newObject[]{0, LinkTool.upload("space/"+uri)}); 

}

jsp 主页面code:

<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%
request.setCharacterEncoding("UTF-8");
String htmlData = request.getParameter("content1") != null ? request.getParameter("content1") : "";
%>
<!doctype html>
<html>
<head>
	<meta charset="utf-8" />
	<title>KindEditor JSP</title>
	<script type="text/javascript" charset="utf-8" src="../kindeditor.js"></script>
	<script type="text/javascript">
		KE.show({
			id : 'content1',
			imageUploadJson : '../../jsp/upload_json.jsp',
			fileManagerJson : '../../jsp/file_manager_json.jsp',
			allowFileManager : true,
			afterCreate : function(id) {
				KE.event.ctrl(document, 13, function() {
					KE.util.setData(id);
					document.forms['example'].submit();
				});
				KE.event.ctrl(KE.g[id].iframeDoc, 13, function() {
					KE.util.setData(id);
					document.forms['example'].submit();
				});
			}
		});
	</script>
</head>
<body>
	<%=htmlData%>
	<form name="example" method="post" action="demo.jsp">
		<textarea id="content1" name="content1" cols="100" rows="8" style="width:700px;height:200px;visibility:hidden;"><%=htmlspecialchars(htmlData)%></textarea>
		<br />
		<input type="submit" name="button" value="æäº¤å†…å®¹" /> (æäº¤å¿«æ·é”®: Ctrl + Enter)
	</form>
</body>
</html>
<%!
private String htmlspecialchars(String str) {
	str = str.replaceAll("&", "&amp;");
	str = str.replaceAll("<", "&lt;");
	str = str.replaceAll(">", "&gt;");
	str = str.replaceAll("\"", "&quot;");
	return str;
}
%>

您可能感兴趣的与本文相关的镜像