<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.p_w_picpath_previewText=' '; //预览区域显示内容  
 
 config.filebrowserWindowWidth = '440';      
 config.filebrowserWindowHeight = '500';
    config.filebrowserImageUploadUrl = 'upload.action';
    //定义图片上传的action   
    config.filebrowserImageBrowseUrl = 'browse.action?type=p_w_picpaths';  
    //定义浏览服务器图片的页面 
};


浏览服务器图片页面代码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()
      + "' οnclick=\"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;
   
  }

实际效果如下图：


wKioL1XDBtaxuiAaAALA2ueT5Bs475.jpg


上传图片action代码:


    private File upload;  
    private String uploadContentType;           
    private String uploadFileName;      
    private String CKEditorFuncNum;
 
 
 public String upload(){
   String destPath = ServletActionContext.getServletContext().getRealPath("ckeditor/uploader/upload/p_w_picpaths/");
   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/p_w_picpaths/"     
         + uploadFileName    
         + "', '');</script>");
         
         } catch (IOException e) {
    e.printStackTrace();
   }
   return Action.NONE;
   
  }


strut.xml配置无需result

<action name="upload" class="noticeAction" method="upload" >
  </action>


wKiom1XDGqPinC5zAAHn2x6_5pU195.jpg

参考文章：

http://blog.csdn.net/mamba10/article/details/8543219

该文章中out.write写图片路径时前面少加了个应用名admin(你的web项目部署在服务器下的应用名），大家要注意