<head>标签内引入
<script src="${ctx}/ckeditor/ckeditor.js" type="text/javascript"></script>
config.js配置文件
CKEDITOR.editorConfig = function( config ) {
// Define changes to default configuration here. For example:
config.language = 'zh-cn';
config.uiColor = '#AADC6E';
config.image_previewText=' '; //预览区域显示内容
config.filebrowserWindowWidth = '440';
config.filebrowserWindowHeight = '500';
config.filebrowserImageUploadUrl = 'upload.action';
//定义图片上传的action
config.filebrowserImageBrowseUrl = 'browse.action?type=images';
//定义浏览服务器图片的页面
};
浏览服务器图片页面代码browse.jsp：
<%@ page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<%@page import="java.io.File"%>
<script type="text/javascript">
//这段函数是重点，不然不能和CKEditor互动了
function funCallback(funcNum, fileUrl) {
var parentWindow = (window.parent == window) ? window.opener
: window.parent;
parentWindow.CKEDITOR.tools.callFunction(funcNum, fileUrl);
window.close();
}
</script>
<div>
<%
String path = request.getContextPath() + "/";
String type = "";
if (request.getParameter("type") != null)//获取文件分类
type = request.getParameter("type").toLowerCase() + "/";
String clientPath = "ckeditor/uploader/upload/" + type;
File root = new File(request.getSession().getServletContext()
.getRealPath(clientPath));
if (!root.exists()) {
root.mkdirs();
}
String callback = request.getParameter("CKEditorFuncNum");
File[] files = root.listFiles();
if (files.length > 0) {
for (File file : files) {
String src = path + clientPath + file.getName();
out.println("<img width='110px' height='70px' src='" + src
+ "' alt='" + file.getName()
+ "' onclick=\"funCallback(" + callback + ",'"
+ src + "')\">");
}
} else {
out.println("<h3>未检测到资源。</h3>");
}
%>
</div>
strut.xml配置
<!-- ckeditor浏览和上传图片 --> <action name="browse" class="noticeAction" method="browse" > <result name="success">/ckeditor/uploader/browse.jsp</result> </action>
后台代码，后台action不做处理,直接跳转到browse.jsp页面
//ckeditor上传图片和浏览图片
public String browse(){
System.out.println(this.getRequest().getContextPath());
System.out.println(ServletActionContext.getServletContext().getRealPath("ckeditor/uploader/upload/"));
return SUCCESS;
}
实际效果如下图：
上传图片action代码:
private File upload;
private String uploadContentType;
private String uploadFileName;
private String CKEditorFuncNum;
public String upload(){
String destPath = ServletActionContext.getServletContext().getRealPath("ckeditor/uploader/upload/images/");
System.out.println(destPath);
File file=new File(destPath);
if(!file.exists()) file.mkdirs();
System.out.println(file);
try {
System.out.println(uploadFileName);
String uuid = UUID.randomUUID().toString();
String rt[] = uploadFileName.split("\\.");
System.out.println(rt[1]);
uploadFileName = new String(uuid+"."+rt[1]);//解决上传图片中文路径时服务器报错的问题。
FileUtils.copyFile(upload, new File(file,uploadFileName));
PrintWriter out = ServletActionContext.getResponse().getWriter();
out.write("<script type='text/javascript'>window.parent.CKEDITOR.tools.callFunction("+CKEditorFuncNum+", '/admin/ckeditor/uploader/upload/images/"
+ uploadFileName
+ "', '');</script>");
} catch (IOException e) {
e.printStackTrace();
}
return Action.NONE;
}
strut.xml配置无需result
<action name="upload" class="noticeAction" method="upload" > </action>
参考文章：
http://blog.csdn.net/mamba10/article/details/8543219
该文章中out.write写图片路径时前面少加了个应用名admin(你的web项目部署在服务器下的应用名），大家要注意
本文出自 “点滴积累” 博客，请务必保留此出处http://tianxingzhe.blog.51cto.com/3390077/1682293
时间： 2024-09-13 22:03:00