CKEditor和CKFinder实现图片上传

一、  CKEditor和CKFinder实现上传

1、在MyEclipse 中新建WEB项目upobj 

解压下载好的 CKEditor3.53_Finder_for_java2.1整合所有文件.rar 文件。

双击进入[CKEditor3.53_Finder_for_java2.1整合所有文件 ] 文件夹。

a、进入解压后的[ CKEditor3.53_Finder_for_java2.1] 文件夹，拷贝 ckeditor,chfinder 两个文件夹到项目WebRoot 目录下，并在WebRoot 目录下新建userfiles 文件夹

b、    进入解压后的[ CKEditor3.53_Finder_for_java2.1] 文件夹， 拷贝config.xml 文件到WEB-INF 目录下，并拷贝lib目录中的所有jar包到WEB-INF目录中的lib目录中。    

                                                                                          

2、修改文件

a、修改拷贝到WEB-INF 目录下的config.xml文件

点击(此处)折叠或打开

           

1. <enabled>true</enabled>
   
2.              
   
3.  <baseURL>/upobj/userfiles/</baseURL>

 这里：<baseURL>/upobj/userfiles/</baseURL>         /upobj 是项目名称（应用名） /userfiles 是  上面  WebRoot 目录下新建的userfiles 文件夹，在上传文件时会用到。


    b、修改拷贝到WEB-INF 目录下的web.xml文件 
           添加以下内容：
     

点击(此处)折叠或打开

1. <!-- upload -->
   
2.  <servlet>
   
3.   <servlet-name>ConnectorServlet</servlet-name>
   
4.   <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
   
5.   <init-param>
   
6.    <param-name>XMLConfig</param-name>
   
7.    <param-value>/WEB-INF/config.xml</param-value>
   
8.   </init-param>
   
9.   <init-param>
   
10.    <param-name>debug</param-name>
    
11.    <param-value>false</param-value>
    
12.   </init-param >
    
13.    <load-on-startup>1</load-on-startup>
    
14.   </servlet >
    
15.   <servlet-mapping>
    
16.    <servlet-name>ConnectorServlet</servlet-name>
    
17.    <url-pattern >/ckfinder/core/connector/java/connector.java</url-pattern>
    
18.   </servlet-mapping>
    
19.   <filter>
    
20.    <filter-name>FileUploadFilter</filter-name>
    
21.    <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
    
22.    <init-param>
    
23.     <param-name>sessionCookieName</param-name>
    
24.     <param-value>JSESSIONID</param-value>
    
25.    </init-param>
    
26.    <init-param>
    
27.     <param-name>sessionParameterName</param-name>
    
28.     <param-value>jsessionid</param-value>
    
29.    </init-param>
    
30.   </filter>
    
31.   <filter-mapping>
    
32.    <filter-name>FileUploadFilter</filter-name>
    
33.    <url-pattern >/ckfinder/core/connector/java/connector.java</url-pattern>
    
34.   </filter-mapping>

 
        b 、修改 WebRoot /ckeditor 目录下的config.js 文件         
      

                            

点击(此处)折叠或打开

1. /*
   
2. Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
   
3. For licensing, see LICENSE.html or http://ckeditor.com/license
   
4. */ 
   
5. 
   
6. CKEDITOR.editorConfig = function (config) { 
   
7.       config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html' ; 
   
8.      config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?type=Images' ; 
   
9.      config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?type=Flash' ; 
   
10.      config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ; 
    
11.      config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ; 
    
12.      config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ; 
    
13.      config.filebrowserWindowWidth = '1000'; 
    
14.       config.filebrowserWindowHeight = '700';
    
15.       // 编辑器样式，有三种：'kama'（默认）、'office2003'、'v2' 
    
16.       config.skin = 'office2003';
    
17.       // 背景颜色 
    
18.   config.uiColor = '#FFF'; 
    
19.   // 工具栏（基础'Basic'、全能'Full'、自定义）plugins/toolbar/plugin.js
    
20.   config.toolbar = 'Full';
    
21.   config.height = 400;
    
22.       config.resize_enabled = false;
    
23.       config.autoUpdateElement = true;
    
24.      config.language = "zh-cn" ; 
    
25. };

 c、修改 index.jsp     
     

点击(此处)折叠或打开

1. <%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
   
2.  <%
   
3.  String path = request.getContextPath();
   
4.  String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
   
5.  %>
   
6. <%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %> 
   
7. <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
   
8.  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
   
9.  <html>
   
10.    <head>
    
11.      <base href="<%=basePath%>">
    
12.      <title>My JSP 'index.jsp' starting page</title>
    
13.   <meta http-equiv="pragma" content="no-cache">
    
14.   <meta http-equiv="cache-control" content="no-cache">
    
15.   <meta http-equiv="expires" content="0"> 
    
16.   <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    
17.   <meta http-equiv="description" content="This is my page">
    
18.   <!--
    
19.  <link rel="stylesheet" type="text/css" href="styles.css">
    
20.   -->
    
21.    </head>
    
22.    
    
23.    <body>
    
24.      This is my JSP page. <br>
    
25. <form action = "getContent" method = "get" > 
    
26.  <textarea cols = "80" id = "editor1" name = "editor1" rows = "10" ></textarea > 
    
27.   <input type = "submit" value = "Submit" /> 
    
28.  </form > 
    
29.  <ckfinder:setupCKEditor basePath = "/upobj/ckfinder/" editor = "editor1" /> 
    
30. <ckeditor:replace replace = "editor1" basePath = "/upobj/ckeditor/" /> 
    
31.    </body>
    
32.  </html>

到此，配置结束了。
 3、运行测试
    启动项目，浏览器地址栏中输入 ：http://localhost:8080/upobj/

    在页面中点击[图像] 小图标，打开“图象属性”对话框，选择“上传”选项卡，
 
   

点击[ 浏览 ]按钮选择要上传的图像文件，点击[ 确定 ]上传图片。 点击[浏览] 选择要上传的图片文件，点击[上传到服务器上]，点击[确定]按钮。









上传完成。