一、 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文件
点击(此处)折叠或打开
- <enabled>true</enabled>
-
- <baseURL>/upobj/userfiles/</baseURL>
这里:<baseURL>/upobj/userfiles/</baseURL> /upobj 是项目名称(应用名) /userfiles 是 上面 WebRoot 目录下新建的userfiles 文件夹,在上传文件时会用到。
b、修改拷贝到WEB-INF 目录下的web.xml文件
添加以下内容:
点击(此处)折叠或打开
- <!-- upload -->
- <servlet>
- <servlet-name>ConnectorServlet</servlet-name>
- <servlet-class>com.ckfinder.connector.ConnectorServlet</servlet-class>
- <init-param>
- <param-name>XMLConfig</param-name>
- <param-value>/WEB-INF/config.xml</param-value>
- </init-param>
- <init-param>
- <param-name>debug</param-name>
- <param-value>false</param-value>
- </init-param >
- <load-on-startup>1</load-on-startup>
- </servlet >
- <servlet-mapping>
- <servlet-name>ConnectorServlet</servlet-name>
- <url-pattern >/ckfinder/core/connector/java/connector.java</url-pattern>
- </servlet-mapping>
- <filter>
- <filter-name>FileUploadFilter</filter-name>
- <filter-class>com.ckfinder.connector.FileUploadFilter</filter-class>
- <init-param>
- <param-name>sessionCookieName</param-name>
- <param-value>JSESSIONID</param-value>
- </init-param>
- <init-param>
- <param-name>sessionParameterName</param-name>
- <param-value>jsessionid</param-value>
- </init-param>
- </filter>
- <filter-mapping>
- <filter-name>FileUploadFilter</filter-name>
- <url-pattern >/ckfinder/core/connector/java/connector.java</url-pattern>
- </filter-mapping>
b 、修改 WebRoot /ckeditor 目录下的config.js 文件
点击(此处)折叠或打开
- /*
- Copyright (c) 2003-2012, CKSource - Frederico Knabben. All rights reserved.
- For licensing, see LICENSE.html or http://ckeditor.com/license
- */
-
- CKEDITOR.editorConfig = function (config) {
- config.filebrowserBrowseUrl = '/ckfinder/ckfinder.html' ;
- config.filebrowserImageBrowseUrl = '/ckfinder/ckfinder.html?type=Images' ;
- config.filebrowserFlashBrowseUrl = '/ckfinder/ckfinder.html?type=Flash' ;
- config.filebrowserUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files' ;
- config.filebrowserImageUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images' ;
- config.filebrowserFlashUploadUrl = '/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash' ;
- config.filebrowserWindowWidth = '1000';
- config.filebrowserWindowHeight = '700';
- // 编辑器样式,有三种:'kama'(默认)、'office2003'、'v2'
- config.skin = 'office2003';
- // 背景颜色
- config.uiColor = '#FFF';
- // 工具栏(基础'Basic'、全能'Full'、自定义)plugins/toolbar/plugin.js
- config.toolbar = 'Full';
- config.height = 400;
- config.resize_enabled = false;
- config.autoUpdateElement = true;
- config.language = "zh-cn" ;
- };
c、修改 index.jsp
点击(此处)折叠或打开
- <%@ page language="java" import="java.util.*" pageEncoding="utf8"%>
- <%
- String path = request.getContextPath();
- String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
- %>
- <%@ taglib uri="http://ckfinder.com" prefix="ckfinder" %>
- <%@ taglib uri="http://ckeditor.com" prefix="ckeditor" %>
- <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
- <html>
- <head>
- <base href="<%=basePath%>">
- <title>My JSP 'index.jsp' starting page</title>
- <meta http-equiv="pragma" content="no-cache">
- <meta http-equiv="cache-control" content="no-cache">
- <meta http-equiv="expires" content="0">
- <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
- <meta http-equiv="description" content="This is my page">
- <!--
- <link rel="stylesheet" type="text/css" href="styles.css">
- -->
- </head>
-
- <body>
- This is my JSP page. <br>
- <form action = "getContent" method = "get" >
- <textarea cols = "80" id = "editor1" name = "editor1" rows = "10" ></textarea >
- <input type = "submit" value = "Submit" />
- </form >
- <ckfinder:setupCKEditor basePath = "/upobj/ckfinder/" editor = "editor1" />
- <ckeditor:replace replace = "editor1" basePath = "/upobj/ckeditor/" />
- </body>
- </html>
到此,配置结束了。
3、运行测试
启动项目,浏览器地址栏中输入 :http://localhost:8080/upobj/
在页面中点击[图像] 小图标,打开“图象属性”对话框,选择“上传”选项卡,
点击[ 浏览 ]按钮选择要上传的图像文件,点击[ 确定 ]上传图片。 点击[浏览] 选择要上传的图片文件,点击[上传到服务器上],点击[确定]按钮。
上传完成。