Chinaunix首页 | 论坛 | 博客

小小程序员

首页　| 　博文目录　| 　关于我

wng1978

  • 博客访问： 57139
  • 博文数量： 11
  • 博客积分： 210
  • 博客等级： 二等列兵
  • 技术积分： 135
  • 用 户 组： 普通用户
  • 注册时间： 2008-08-01 11:55
文章分类

全部博文（11）

文章存档

2013年（6）

2008年（5）

我的朋友
最近访客
推荐博文
相关博文
CKEditor和CKFinder实现上传

分类： Java

2013-09-12 13:57:10

CKEditor和CKFinder实现上传

本文介绍，CKEditor和CKFinder实现上传。实现项目中如果与Struts2 整合实现上传，则可能出显一些问题，解决方法请参考本人的另一 篇文章“struts2 整合 CKEditor和CKFinder 问题解决”。

提示：本文介绍的是java版本的， 用到的有：jsp + ckeditor + ckfinder +Strust2

java集成开发工具：MyEclipse 2013版
资源准备：大家可以直接下载我打包好的资源，里面包含了 ckeditor3.53 + ckfinder2.1 for java + 项目中用到的jar 包 + 两个XML文件。 下载地址： 

或者大家也可以去网上下载。网上一搜一大堆，这里我就不多说了。


一、  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>




 这里：/upobj/userfiles/         /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
  4. */

  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="" prefix="ckfinder" %>
  7. <%@ taglib uri="" 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.    </head>
  20.    
  21.    <body>
  22.      This is my JSP page. <br>
  23. <form action = "getContent" method = "get" >
  24.  <textarea cols = "80" id = "editor1" name = "editor1" rows = "10" ></textarea >
  25.   <input type = "submit" value = "Submit" />
  26.  </form >
  27.  <ckfinder:setupCKEditor basePath = "/upobj/ckfinder/" editor = "editor1" />
  28. <ckeditor:replace replace = "editor1" basePath = "/upobj/ckeditor/" />
  29.    </body>
  30.  </html>


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

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

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









上传完成。


 

阅读(3735) | 评论(0) | 转发(0) |
0

上一篇：关于java.lang.NoClassDefFoundError: org/objectweb/asm/Type

下一篇：struts2 整合 CKEditor和CKFinder 常遇问题解决

给主人留下些什么吧！~~
关于我们 | 关于IT168 | 联系方式 | 广告合作 | 法律声明 | 免费注册

Copyright 2001-2010 ChinaUnix.net All Rights Reserved 北京皓辰网域网络信息技术有限公司. 版权所有

感谢所有关心和支持过ChinaUnix的朋友们

16024965号-6