效果图:
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);
}