KindEditor 实现图文上传方法介绍

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

aabbcc456aa

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

阅读量897

点赞数

CC 4.0 BY-SA版权

分类专栏： HTML/CSS/JS 文章标签： string function json url manager button

本文链接：https://blog.youkuaiyun.com/aabbcc456aa/article/details/8065158

HTML/CSS/JS 专栏收录该内容

18 篇文章

订阅专栏

本文介绍如何使用KindEditor 3.5.x实现本地图片上传功能，并提供了一个具体的代码示例，包括配置编辑器参数及后端处理逻辑。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

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

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

`1` `KE.show({`

`2`     `id :` `'ta_blog_content',`

`3`     `resizeMode : 1,`

`4`     `shadowMode :` `false,`

`5`     `allowPreviewEmoticons :` `false,`

`6`     `urlType :` `'absolute',`

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

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

`9` `});`

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

view source

print ?

`01` `/**`

`02` `* 图片上传`

`03` `* @param ctx`

`04` `* @throws IOException`

`05` `*/`

`06` `@Annotation.PostMethod`

`07` `@Annotation.JSONOutputEnabled`

`08` `public` `void` `upload_img(RequestContext ctx)` `throws` `IOException {`

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

`10`     `if(imgFile.length() > MAX_IMG_SIZE ){`

`11`         `ctx.output_json(`

`12`             `new` `String[]{"error","message"},`

`13`             `new` `Object[]{1,ResourceUtils.getString("error","file_too_large", MAX_IMG_SIZE/1024)}`

`14`         `);`

`15`         `return` `;`

`16`     `}`

`17`     `String uri =` `new` `SimpleDateFormat("yyyyMMdd").format(new` `Date())`

`18`         `+` `"/IMG_"`

`19`         `+ RandomStringUtils.randomAlphanumeric(4)`

`20`         `+` `'_'`

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

`22`         `+` `'.'`

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

`24`

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

`26`     `ctx.output_json(new` `String[]{"error","url"},` `new` `Object[]{0, LinkTool.upload("space/"+uri)});`

`27` `}`

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;
}
%>