`
xiebin_javaLover
  • 浏览: 6627 次
  • 性别: Icon_minigender_1
  • 来自: 重庆
社区版块
存档分类
最新评论

ckedit+ckfinder整合于struts2框架 ,完成图片上传管理

阅读更多

上个项目用过的知识点总计:


一.需要的资源:

用到的网站,文件自己下载:
a) ckeditor_3.6.2 (解压)
b) ckeditor-java-3.6.2 (解压)
c) ckfinder_java_2.1 (解压)

推荐到官网下载最新版本 :http://ckeditor.com/download
二. 执行步骤:

1. MyEclipse新建 Web Project : CKEditor_Finder

2. 复制以下文件夹到WebRoot下面:

ckfinder_java_2.1\ckfinder\ CKFinderJava \ckfinder

注意:CKFinder 加粗的是 war 包解压后的文件夹的名称

ckeditor_3.6.2/ckeditor
3. 复制 CKFinder配置文件 到WEB-INF 下面:

ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\config.xml

4. 复制下面文件夹下面所有jar 文件到 WEB-INf/lib 下面:
ckfinder_java_2.1\ckfinder\CKFinderJava\WEB-INF\lib
ckeditor-java-3.6.2\WEB-INF\lib

三. 下面删除无用的文件
首先是ckeditor 下面的文件:
_sample,_source, CHANGES.html, ckeditor_php4.php ,  ckeditor_php5.php,
ckeditor.asp, ckeditor.pack, INSTALL.html, LICENSE.html

然后是ckfinder 下面的文件:
_samples, help, changelog.txt, install.txt, license.txt, translation.txt

四. 修改配置文件WEB-INF下config.xml
     <!-- 默认为false的改为true -->
    <enabled >true </enabled> 
    //指定上传文件或者图片的保存地址 :CKEditor_Finder为项目名,改为你自己的。
    <baseURL >/CKEditor_Finder/userfiles/ </ baseURL >  

 
五. 在web.xml 中增加如下代码:

    <!-- 图片管理功能的配置 -->
  <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>
  
  <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>
  <!-- 图片管理功能的配置结束 --> 

六. 修改ckeditor/config.js文件的内容

    CKEDITOR.editorConfig =  function (config) { 
        config.filebrowserBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html' ; 
        config.filebrowserImageBrowseUrl =  '/CKEditor_Finder/ckfinder/ckfinder.html?type=Images' ; 
        config.filebrowserFlashBrowseUrl =  '/CKEditor_Finder/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'; 
        config.language =  "zh-cn" ; 
    };  

七. 修改index.jsp文件的内容如下:

    <%@   page   language = "java"   import = "java.util.*"   pageEncoding = "utf-8" %> 
    <%@   taglib   uri = "http://ckfinder.com"   prefix = "ckfinder"   %> 
    <%@   taglib   uri = "http://ckeditor.com"   prefix = "ckeditor"   %> 
    <% 
    String path = request.getContextPath(); 
    String basePath = request.getScheme()+ "://" +request.getServerName()+ ":" +request.getServerPort()+path+ "/" ; 
    %> 
   
    <! DOCTYPE   HTML  PUBLIC   "-//W3C//DTD HTML 4.01 Transitional//EN"> 
    < html > 
        < head > 
         < base   href = " <%= basePath %> " > 
         < title > 首页 </ title > 
       < meta   http-equiv = "pragma"   content = "no-cache" > 
       < meta   http-equiv = "cache-control"   content = "no-cache" > 
       < meta   http-equiv = "expires"   content = "0" > 
      </head> 
       <body> 
       < form   action = "getContent"   method = "get" > 
           < textarea   cols = "80"   id = "editor1"   name = "editor1"   rows = "10" ></ textarea > 
           < input   type = "submit"   value = "Submit"   /> 
       </ form > 
       < ckfinder:setupCKEditor   basePath = "/CKEditor_Finder/ckfinder/"   editor = "editor1"   /> 
       < ckeditor:replace   replace = "editor1"   basePath = "/CKEditor_Finder/ckeditor/"   /> 
       </body> 
    </html>  

 

修改tomcat配置文件URIEncoding="utf-8" 设置中的URIEncoding 是为了在访问的时候,即使访问路径中出现中文也能正常访问.
<Connector port="80" protocol="HTTP/1.1"
               connectionTimeout="20000"
  redirectPort="8443" URIEncoding="utf-8" />


重点:
注意:如果用到struts2,图片上传没反应的话。这点把上传的请求也拦截过滤掉了

 <filter-mapping>
  <filter-name>Struts2</filter-name>
  <url-pattern>/*</url-pattern>
  </filter-mapping>
改成
 <filter-mapping>
  <filter-name>Struts2</filter-name>
  <url-pattern>*.do</url-pattern>
 </filter-mapping>

分享到:
评论

相关推荐

    CKedit+ckFinder Code Examples

    CKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ExamplesCKedit+ckFinder Code ...

    ckedit+jsp+struts2+json上传图片.rar

    《基于CKEditor、JSP、Struts2与JSON的图片上传技术详解》 在Web开发中,用户交互体验是至关重要的,尤其是涉及到内容编辑时,一个功能强大的富文本编辑器可以大大提高用户的操作便利性。CKEditor就是这样一款常用...

    ckedit与ckfinder的整合

    - 配置CKFinder以支持图片、Flash等文件的上传。这通常涉及到修改CKFinder的配置文件,比如 `config.php`,设定允许上传的文件类型、大小限制,以及存储路径等。 5. **Ckfinder 实现普通文件上传**: - 通过...

    CKedit与CKFinder在.net 中的联合使用

    CKEditor和CKFinder是两个非常流行的开源Web编辑器和文件管理工具,它们在.NET环境中有着广泛的应用。CKEditor是一款功能强大的HTML文本编辑器,而CKFinder则是一个用于管理和上传文件的用户界面,常与CKEditor搭配...

    ckeditor+ckfinder(可用)

    ckeditor+ckfinder,很强大的文本编辑器。所有东西已配置好,直接解压后放到网站根目录下就可以使用,可以上传图片,flash等。

    CkEdit3.6.2+asp.net控件+CKFindor2.1

    CKFinder 2.1 是与CKEditor配套使用的文件管理工具,用于上传、浏览和管理编辑器中使用的图片、文档和其他媒体文件。它提供了用户友好的界面,便于用户查找和插入到CKEditor中的资源。CKFinder 支持多种文件类型,...

    CKedit后台开发

    CKedit是一款流行的开源JavaScript富文本编辑器,它提供了丰富的文本格式化选项,图片上传、链接管理等功能,广泛应用于网页内容编辑场景。在Java后台开发中,我们需要理解如何将CKedit与服务器进行交互,实现数据的...

    .net ckeditor 3.6.2 和 ckfinder 2.2 配置

    CKEditor是一款流行的开源富文本编辑器,而CKFinder则是一个文件管理和上传组件,它们常常搭配使用,为用户提供了一个全面的内容创作和管理环境。 CKEditor 3.6.2是CKEditor的一个旧版本,但仍然具有很高的实用性。...

    富文本插件Ckedit

    CKEditor内置了图片上传功能,允许用户在编辑过程中直接将本地图片上传到服务器。用户只需点击编辑器中的图片插入按钮,选择图片文件,即可完成上传。同时,CKEditor还支持图片的预览、裁剪和调整大小,使得在网页上...

    Ckedit和CKfind结合使用

    CKfind支持多语言,且与CKedit整合良好,用户可以直接在编辑器内插入从CKfind选取的图片或文件。其安全性也是一大亮点,可以设置访问权限,限制不同用户对文件系统的操作范围,确保数据安全。 两者结合使用的优势:...

    CkEdit测试源码包含上传文件至服务器

    4. **反馈结果**:上传完成后,编辑器应能显示上传成功的提示,或者如果上传失败,显示错误信息。这需要与后端返回的响应进行交互处理。 5. **安全考虑**:确保文件上传的安全性至关重要,防止恶意文件上传和DoS...

    ckeditor批量上传图片--demo

    2. **创建上传插件**:开发或获取一个名为"imageupload"的插件,它应该包含用于选择图片、创建上传请求、接收响应以及将图片插入编辑器的逻辑。 3. **前端界面**:设计一个用户友好的界面,允许用户选择多张图片。...

    ckedit4.11富文本编辑器

    这个编辑器广泛应用于网站、博客、论坛和其他在线内容管理系统,因为它能提供类似于桌面文字处理软件的编辑环境,使得用户在浏览器上也能进行复杂的文本格式化和内容编辑。 CKEditor的核心特性包括: 1. **所见即...

    fckedit ckedit图片上传浏览java板

    直接放置在tomcat下,访问index.jsp

    ckedit 替换表情

    CKEditor 是一款功能强大的富文本编辑器,广泛应用于网站内容管理、博客系统、论坛等在线文本输入场景。它提供了一套完善的API,允许开发者进行高度自定义,以满足不同项目的需求。CKEditor 支持多种格式的文本编辑...

    ckedit编辑器添加上传功能

    在很多场景下,尤其是内容管理系统(CMS)中,能够直接在编辑器内上传图片或多媒体文件是一项重要的需求。 #### 二、配置CKEditor实现上传功能 ##### 1. 配置config.js 为了使CKEditor具备上传图片的功能,首先...

    ckeditor jwplayer plugin

    网站中可能需要发布一些视频,比如介绍产品或者一些新闻等视频,如果网站后台使用的编辑器为ckeditor或者ckeditor+ckfinder,就需要ckeditor的一些插件来发布我们的视频,视频播放器使用的是jwplayer 使用方法: 1、...

    quill.js + ckedit.js.zip

    2. **插件生态系统**:拥有庞大的插件库,涵盖了从基本的格式化到复杂的集成(如图片管理、公式编辑)等各种功能。 3. **多语言支持**:支持多种语言,方便国际化的网站使用。 4. **WYSIWYG**:所见即所得的编辑体验...

Global site tag (gtag.js) - Google Analytics