KindEditor图片上传相关问题

shelltea

浏览: 34625 次
性别:
来自: 北京

最近访客更多访客>>

wy_2017

Verlet

fhdone

码农1

博主相关

博客

微博

相册

留言

关于我

文章分类

社区版块

存档分类

Firefox JavaScript JSP Web CSS

从众多的Web编辑器中选择KindEditor ，主要是看重它的小巧。一个JS文件、两个CSS文件和一个GIF图片就是它的全部。所以在页面上的加载速度很快，而且功能也相对齐全。

目前KindEditor自带的图片上传组件仅仅是对PHP的支持，但是我的项目用到了Struts2，所以图片上传这一块还需要自己来写。

首先，修改plugins目录下的image.html文件，将form的action改为：

action="/imageUpload"

并且在

<input type="hidden" id="editorId" name="id" value="" />

中的value属性设置为你页面上编辑器的id。

这个地址对应的是一个Action，在Struts2中的配置为：

<action name="imageUpload" class="com.bjqxwh.manage.web.KindEditorImageUploadAction">
			<result name="success">/editor/imageUploadSuccess.jsp</result>
			<result name="error">/editor/imageUploadError.jsp</result>
</action>

具体代码如下：

package com.bjqxwh.manage.web;

import java.io.File;

import org.apache.struts2.ServletActionContext;

import com.bjqxwh.manage.service.UploadService;
import com.opensymphony.xwork2.ActionSupport;

/**
 * 处理从KindEditor编辑器中上传的图片
 * 
 * @author shelltea
 * 
 */
public class KindEditorImageUploadAction extends ActionSupport {
	private static final long serialVersionUID = 920697011722287589L;
	private String savePath = "/editor/upload";
	private File imgFile;
	private String imgFileContentType;
	private String imgFileFileName;
	private String id;
	private String imgTitle;
	private String imgWidth;
	private String imgHeight;
	private String imgBorder;

	private String saveUrl;
       
       // 省略Setter和Getter方法    
  
	@Override
	public String execute() throws Exception {
		saveUrl = UploadService.upload(imgFile, imgFileFileName, savePath,
				ServletActionContext.getRequest());
               // 针对FireFox自动将绝对地址转换为相对地址的，将保持的URL改为相对地址
		String[] s = saveUrl.split("/");
		saveUrl = "/" + s[3] + "/" + s[4] + "/" + s[5];
		return SUCCESS;
	}
}

这段代码中的UploadService是我自己写的一个上传服务组件，通过调用upload方法上传文件，并返回在服务器上的绝对地址。但是直接返回的绝对地址在FireFox中自动转换为了相对地址。这就给编辑带来的不便，在编辑时编辑器中显示不出图片，问题就处在地址上，所以干脆将地址直接转换为相对地址来解决这个问题。

然后是写一个上传成功后的页面：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert image</title>
</head>
<body>
<script language="javascript" type="text/javascript">
parent.KE.plugin["image"].insert("${id}","${saveUrl}","${imgTitle}","${imgWidth}","${imgHeight}","${imgBorder}");
</script>
</body>
</html>

UploadService.rar (735 Bytes)
下载次数: 276

分享到：

S2SH整合中web.xml的相关问题集合 | JavaMail相关问题

2009-05-14 11:58
浏览 6457
评论(7)
查看更多

7 楼 shelltea 2010-05-13

wjc_3306 写道

您好我按您的改了以后还是js报错
网页错误详细信息

消息: 例外被抛出且未被接住
行: 1152
字符: 3
代码: 0
URI: http://localhost:8080/laboa/js/procedure/kindeditor.js

拜求解答

真不好意思，这篇blog一年前写的。很多东西都忘了。而且最近也没用使用kindeditor。我看了你这个错误，我也不清楚什么问题，抱歉

6 楼 wjc_3306 2010-05-10

5 楼 wjc_3306 2010-05-09

啊对不起没看到下面还有个下载。。。

4 楼 wjc_3306 2010-05-09

:oops: 为什么现在的牛人都喜欢代码贴一半。。真叫人痛苦啊！！！！

3 楼 aprilsuny 2009-09-22

imgFile,imgFileFileName
不知道为什么,它们都是为空,所以出错,进行不下去了~~

2 楼 treblesoftware 2009-09-16

兄弟，上传写的太简单了。如果上传文件名同名怎么办？

1 楼 lsanmu 2009-06-07

提供一下uploadservice的代码，不胜感激

发表评论

您还没有登录,请您登录后再发表评论

最近访客更多访客>>

博主相关

文章分类

社区版块

存档分类

最新评论