ckeditor富文本编辑器上传图片+html编辑+strtus

效果图



1需要的文件(ckeditor.js;config.js):点击打开链接

2.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/global.jsp"%>
<script type="text/javascript" src="js/ckeditor/ckeditor.js"></script>

<div style="width: 100%; height: 100%; overflow: auto">
	<div style="padding-top: 10px;" class="col-xs-12 form-inline">
			<div  οnclick="check()" class="btn btn-white btn-info btn-bold sel-able">
				<i class="fa fa-save"></i> 保存
			</div>
		<div style="padding-top: 10px;">
			<textarea  id="opinion" name="opinion" rows="10" cols="38"></textarea>
		</div>
</div>
</div>
<script type="text/javascript">
	CKEDITOR.replace('opinion',{
		height:1500
		})
	function check() {
		var that=this
		var text=CKEDITOR.instances.opinion.getData();//获取编辑区的html
		var url=".......do?method=...";
		jQuery.ajax( {
			url : url,
			data:{
			text:text
			},
			type : "post",
			success : function(data) {
				alert("保存成功了")
		},
		error : function(xhr, type, errorThrown) {
			alert("网络错误!")
		}
		})
		
	}
</script>

2.文件里有个config.js,在这里配置上传图片的action相应路径

/**
 * @license Copyright (c) 2003-2017, CKSource - Frederico Knabben. All rights
 *          reserved. For licensing, see LICENSE.md or
 *          http://ckeditor.com/license
 */

CKEDITOR.editorConfig = function(config) {
	var curPath = window.document.location.href;
	var pathName = window.document.location.pathname;
	var pos = curPath.indexOf(pathName);
	var localhostPaht = curPath.substring(0, pos);
	var projectName = pathName
			.substring(0, pathName.substr(1).indexOf('/') + 1);
	var allpath = localhostPaht + projectName

	config.filebrowserImageUploadUrl = allpath
			+ "/.....do?method=imgUpload";
};

3.java后台代码实体

package ;

import org.apache.struts.scaffold.BaseForm;
import org.apache.struts.upload.FormFile;
public class imageForm extends BaseForm {
	 /**
	 * 
	 */
	private static final long serialVersionUID = 1L;
	private FormFile upload;  
	    private String uploadContentType;  
	    private String uploadFileName;  
	  

	    public FormFile getUpload() {  
	        return upload;  
	    }  
	  
	    public void setUpload(FormFile 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;  
	    }

	  
}

4.图片上传

public void imgUpload(ActionMapping mapping, ActionForm form,
			HttpServletRequest request, HttpServletResponse response)
			throws Exception {
		imageForm file = (imageForm) form;
		FormFile afile = file.getUpload();// report_data2.txt获取的是文件 不是文件名

		String message = "";
		String type = "0";
		String fileName = "";
		String callback = request.getParameter("CKEditorFuncNum");
		if (!"".equals(file)) {
			String realPath = this.getServlet().getServletContext()
					.getRealPath("/UploadFile/skuInforeport/");
			try {
				fileName = java.util.UUID.randomUUID().toString();
				// 保存到路径里面的代码
				InputStream is = afile.getInputStream();
				OutputStream bos = new FileOutputStream(realPath + "//"
						+ fileName);
				int bytesRead = 0;
				byte[] buffer = new byte[8192];
				while ((bytesRead = is.read(buffer, 0, 8192)) != -1) {
					bos.write(buffer, 0, bytesRead);
				}
				bos.close();
				is.close();
				message = "上传成功";
				type = "1";
			} catch (IOException ioe) {
				message = "上传失败";
				type = "0";
			}
		}
		String path = request.getContextPath();
		String basePath = request.getScheme() + "://" + request.getServerName()
				+ ":" + request.getServerPort() + path + "/";

		String path2 = basePath + "UploadFile/skuInforeport/";
		
		String ww = "<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("
				+ callback + ",'" + path2 + fileName + "', '上传成功');</script>";
		response.getWriter().write(ww);
	}


  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值