Struts2+CKEditor实现web编辑器

CKEditor是目前使用最多的网络编辑器，很多人都说上传图片不好配置，下面来看看怎么实现的简单配置图片上传的。

CKEditor的下载地址：http://ckeditor.com/

下面来看代码实现：

JSP页面：

<s:form action="showMessage">
    	 <textarea name="myckeditor"></textarea>  
    	</s:form>
    	
    	<script type="text/javascript">
	    $(document).ready(function(){  
	    	CKEDITOR.replace('myckeditor'); 
	    });  
    </script>

在JSP页面引入：

<script type="text/javascript" src="js/jquery-1.8.0.min.js"></script> 
	<script type="text/javascript" src="ckeditor/ckeditor.js"></script>  
    <script type="text/javascript" src="ckeditor/config.js"></script>  

图片上传的配置在下面

下面来看ckeditor/config.js内的配置：

<span style="white-space:pre">	</span>config.image_previewText=' '; //预览区域显示内容
	<span style="color:#ff0000;">config.filebrowserImageUploadUrl= "ImgUpload.action";</span> //待会要上传的action或servlet
	config.toolbarGroups = [
	                		{ name: 'document',	   groups: [ 'mode', 'document', 'doctools' ] },
	                		{ name: 'clipboard',   groups: [ 'clipboard', 'undo' ] },
	                		{ name: 'editing',     groups: [ 'find', 'selection', 'spellchecker' ] },
	                		{ name: 'forms' },
	                		{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
	                		{ name: 'paragraph',   groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
	                		{ name: 'links' },
	                		{ name: 'insert' },
	                		{ name: 'styles' },
	                		{ name: 'colors' },
	                		{ name: 'tools' },
	                		{ name: 'others' },
	                		{ name: 'about' }
	                	];

	   config.removeButtons = 'Cut,Copy,Paste,Undo,Redo,Anchor,Underline,Strike,Subscript,Superscript';

	   config.removeDialogTabs = 'image:advanced;link:advanced';
	

下面来看看上传图片的处理类：

package com.mxf.action;

import java.io.File;
import java.io.FileInputStream;
import java.io.FileOutputStream;
import java.io.IOException;
import java.io.InputStream;
import java.io.OutputStream;
import java.io.PrintWriter;

import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import org.apache.struts2.ServletActionContext;

public class ImgUploadAction {
	private File upload; // 文件
	private String uploadContentType; // 文件类型
	private String uploadFileName; // 文件名

	/**
	 * 图片上传
	 * 
	 * @return
	 * @throws IOException
	 */
	public String imgUpload() throws IOException {

		// 获得response,request
		HttpServletResponse response = ServletActionContext.getResponse();
		HttpServletRequest request = ServletActionContext.getRequest();

		response.setCharacterEncoding("utf-8");
		PrintWriter out = response.getWriter();
		// CKEditor提交的很重要的一个参数
		String callback = request.getParameter("CKEditorFuncNum");
		String expandedName = ""; // 文件扩展名
		if (uploadContentType.equals("image/pjpeg")
				|| uploadContentType.equals("image/jpeg")) {
			// IE6上传jpg图片的headimageContentType是image/pjpeg，而IE9以及火狐上传的jpg图片是image/jpeg
			expandedName = ".jpg";
		} else if (uploadContentType.equals("image/png")
				|| uploadContentType.equals("image/x-png")) {
			// IE6上传的png图片的headimageContentType是"image/x-png"
			expandedName = ".png";
		} else if (uploadContentType.equals("image/gif")) {
			expandedName = ".gif";
		} else if (uploadContentType.equals("image/bmp")) {
			expandedName = ".bmp";
		} else {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'文件格式不正确（必须为.jpg/.gif/.bmp/.png文件）');");
			out.println("</script>");
			return null;
		}
		if (upload.length() > 600 * 1024) {
			out.println("<script type=\"text/javascript\">");
			out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
					+ ",''," + "'文件大小不得大于600k');");
			out.println("</script>");
			return null;
		}

		InputStream is = new FileInputStream(upload);
		//图片上传路径
		String uploadPath = ServletActionContext.getServletContext().getRealPath("/img/uploadImg");
		String fileName = java.util.UUID.randomUUID().toString(); // 采用时间+UUID的方式随即命名
		fileName += expandedName;
		File file = new File(uploadPath);
		if (!file.exists()) { // 如果路径不存在，创建
			file.mkdirs();
		}
		File toFile = new File(uploadPath, fileName);
		OutputStream os = new FileOutputStream(toFile);
		byte[] buffer = new byte[1024];
		int length = 0;
		while ((length = is.read(buffer)) > 0) {
			os.write(buffer, 0, length);
		}
		is.close();
		os.close();

		// 返回"图像"选项卡并显示图片  request.getContextPath()为web项目名 
		out.println("<script type=\"text/javascript\">");
		out.println("window.parent.CKEDITOR.tools.callFunction(" + callback
				+ ",'" + request.getContextPath() + "/img/uploadImg/" + fileName + "','')");
		out.println("</script>");
		return null;
	}

	public File getUpload() {
		return upload;
	}

	public void setUpload(File upload) {
		this.upload = upload;
	}

	public String getUploadContentType() {
		return uploadContentType;
	}

	public void setUploadContentType(String uploadContentType) {
		this.uploadContentType = uploadContentType;
	}

	public String getUploadFileName() {
		return uploadFileName;
	}

	public void setUploadFileName(String uploadFileName) {
		this.uploadFileName = uploadFileName;
	}
}

下面是将编辑好的信息显示到另一个页面的处理action：

package com.mxf.action;

import com.opensymphony.xwork2.ActionSupport;

public class ShowMessage extends ActionSupport {

	/**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	
	private String myckeditor;
	
	public String getMyckeditor() {
		return myckeditor;
	}

	public void setMyckeditor(String myckeditor) {
		this.myckeditor = myckeditor;
	}

	@Override
	public String execute() throws Exception {
		System.out.println(myckeditor);
		return "showmsg";
	}

}

下面是struts.xml的配置：

<package name="build" extends="struts-default">
		<action name="ImgUpload" class="com.mxf.action.ImgUploadAction" method="imgUpload">
		</action>
		<action name="showMessage" class="com.mxf.action.ShowMessage">
			<result name="showmsg">/success.jsp</result>
		</action>
	</package>

显示信息的JSP页面：

<body>
	${myckeditor}
</body>

这样我们就实现了简单的网页编辑器。