`
baalwolf
  • 浏览: 345254 次
  • 性别: Icon_minigender_1
  • 来自: 北京
社区版块
存档分类
最新评论

KindEditor 中上传本地图片的方法

FirefoxJSPWebJavaScriptHTML 
阅读更多

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

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

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

Html代码 复制代码
  1. action="/imageUpload"  
action="/imageUpload"

并且在

Html代码 复制代码
  1. <input type="hidden" id="editorId" name="id" value="" />  
<input type="hidden" id="editorId" name="id" value="" />

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

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

Xml代码 复制代码
  1. <action name="imageUpload" class="com.bjqxwh.manage.web.KindEditorImageUploadAction">  
  2.             <result name="success">/editor/imageUploadSuccess.jsp</result>  
  3.             <result name="error">/editor/imageUploadError.jsp</result>  
  4. </action>   
<action name="imageUpload" class="com.bjqxwh.manage.web.KindEditorImageUploadAction">
			<result name="success">/editor/imageUploadSuccess.jsp</result>
			<result name="error">/editor/imageUploadError.jsp</result>
</action>

 

具体代码如下：

Java代码 复制代码
  1. package com.bjqxwh.manage.web;   
  2.   
  3. import java.io.File;   
  4.   
  5. import org.apache.struts2.ServletActionContext;   
  6.   
  7. import com.bjqxwh.manage.service.UploadService;   
  8. import com.opensymphony.xwork2.ActionSupport;   
  9.   
  10. /**  
  11.  * 处理从KindEditor编辑器中上传的图片  
  12.  *   
  13.  * @author shelltea  
  14.  *   
  15.  */  
  16. public class KindEditorImageUploadAction extends ActionSupport {   
  17.     private static final long serialVersionUID = 920697011722287589L;   
  18.     private String savePath = "/editor/upload";   
  19.     private File imgFile;   
  20.     private String imgFileContentType;   
  21.     private String imgFileFileName;   
  22.     private String id;   
  23.     private String imgTitle;   
  24.     private String imgWidth;   
  25.     private String imgHeight;   
  26.     private String imgBorder;   
  27.   
  28.     private String saveUrl;   
  29.           
  30.        // 省略Setter和Getter方法       
  31.      
  32.     @Override  
  33.     public String execute() throws Exception {   
  34.         saveUrl = UploadService.upload(imgFile, imgFileFileName, savePath,   
  35.                 ServletActionContext.getRequest());   
  36.                // 针对FireFox自动将绝对地址转换为相对地址的，将保持的URL改为相对地址   
  37.         String[] s = saveUrl.split("/");   
  38.         saveUrl = "/" + s[3] + "/" + s[4] + "/" + s[5];   
  39.         return SUCCESS;   
  40.     }   
  41. }  
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中自动转换为了相对地址。这就给编辑带来的不便，在编辑时编辑器中显示不出图片，问题就处在地址上，所以干脆将地址直接转换为相对地址来解决这个问题。

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

Html代码 复制代码
  1. <%@ page language="java" contentType="text/html; charset=UTF-8"  
  2.     pageEncoding="UTF-8"%>  
  3. <html>  
  4. <head>  
  5. <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">  
  6. <title>Insert image</title>  
  7. </head>  
  8. <body>  
  9. <script language="javascript" type="text/javascript">  
  10. parent.KE.plugin["image"].insert("${id}","${saveUrl}","${imgTitle}","${imgWidth}","${imgHeight}","${imgBorder}");   
  11. </script>  
  12. </body>  
  13. </html>  
分享到：
| JSTL的EL表达式fn函数
评论
发表评论

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

相关推荐

Magicbox
Global site tag (gtag.js) - Google Analytics