使用struts2完成ckeditor和图片上传

代码地址如下：
http://www.demodashi.com/demo/12427.html

使用struts2完成ckeditor和ckeditor图片上传

ckeditor版本ckeditor_4.8.0_full

struts2版本struts2.5

• 解压压缩包，将解压后的文件夹ckeditor直接拷贝至WebContent下
• 在jsp中引用ckeditor.js

<script type="text/javascript" src="${pageContext.request.contextPath }/js/ckeditor/ckeditor.js"></script>

• 在文本域textarea下方编写如下js代码

<script type="text/javascript">CKEDITOR.replace("editor");</script>

注意:replace中写的是textarea的name名称

• 完整代码:

• 在demo.action中设置属性，名称为editor,提供getter和setter方法
• 在struts.xml中配置好action

<action name="demo" class="demo.DemoAction" method="demo">
	<result>/result.jsp</result>
</action>

• 启动服务器查看效果:

在jsp页面中可以不必写提交按钮，上方有一个保存，效果相同，需要使用editor full版本，该版本相较于标准版本功能更多。

点击保存即可在result.jsp界面中查看，后台打印是html样式。

解决图片上传

• 上传按钮显示解决(默认是没有图片上传的)

在editor文件夹目录下的config.js中添加如下代码:

config.filebrowserUploadUrl="ckeditorUpload.action";
//url地址为一会上传至服务器执行的action

• 图片预览中英文解决

在editor文件夹目录下的config.js中添加如下代码:

config.image_previewText=' ';

• 效果

• 实现上传功能

上面的只是一个上传页面。也就相当于一个HTML的form表单，要配置点击“上传到服务器上”按钮后请求的Action。可以在ckeditor/config.js中配置。该表单的上传标签的name为upload。

在config.js中添加如下代码:

config.filebrowserUploadUrl="ckeditorUpload.action";
//url地址为一会上传至服务器执行的action

该行代码其实在上传按钮显示时就已经配置过。

• struts.xml中代码:

<action name="ckeditorUpload" class="demo.DemoAction" method="upload">
</action>

• 文件上传代码，思路与struts文件上传相同，只需要加上几句即可，代码如下:

	private File upload;    //editor默认的上传表单的标签名为upload
	private String uploadContentType;
	private String uploadFileName;

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

	public String upload() throws Exception{

		HttpServletResponse response = ServletActionContext.getResponse();
        response.setCharacterEncoding("GBK");
        PrintWriter out = response.getWriter();  

		String realPath=ServletActionContext.getServletContext().getRealPath("/images");
		File file = new File(realPath);

		// CKEditor提交的很重要的一个参数
		String callback = ServletActionContext.getRequest().getParameter("CKEditorFuncNum");
		//request.put("callback", callback);

		FileOutputStream fout=
                new FileOutputStream(new File(file,getUploadFileName()));

		FileInputStream in=new FileInputStream(getUpload());

		byte[] buffer=new byte[1024];
        int len=0;
        while((len=in.read(buffer))>0)
            fout.write(buffer,0,len);
        //返回“图像”选项卡，并显示预览图片
        //一定要在流关闭之前写下面三句话，否则图片显示不出来，也不报错
        out.println("<script type=\"text/javascript\">");
        out.println("window.parent.CKEDITOR.tools.callFunction(" + callback + ",'" + ServletActionContext.getRequest().getContextPath() + "/images/" + uploadFileName + "','')");
        out.println("</script>");

        out.close();
        in.close();

		return SUCCESS;
	}

• 效果截图:

• 点击上传到服务器，自动跳转至图像信息选项卡，并显示预览图片

• 点击确定:

• 点击保存，即可在result.jsp页面中查看:

• 控制台打印文本域中的信息:

项目结构

使用struts2完成ckeditor和图片上传

代码地址如下：
http://www.demodashi.com/demo/12427.html

注：本文著作权归作者，由demo大师代发，拒绝转载，转载需要作者授权