logo
搜索
我的图书馆

发文章

发文工具

其他工具

留言交流
搜索
分享

CKEditor+CKFinder+JSP实现在线编辑器上传文件（包括图片、flash）

 看见就非常 2014-05-12

这两天我就一直在琢磨如何才能实现在编编辑器的功能，由于家里的网是电信天翼的3G 卡，有流量限制，如今也就剩下100M左右的流量了，上网也很费劲，于是狠心的上网找了一大堆的资料，终于实现了这样的功能，确实挺纠结的，这里我先给大 家演示基本的搭建，下一篇文章演示在Struts2框架下的搭建。在分享我需要声明一下，这篇文章是参考几个网友提供的资料再加上自己的亲身实现，进行的 一些修改，最终分享给大家。

CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。

CKFinder 也是 CK 系列的产品之一，它有两个功能：上传文件、浏览文件。一般来说，它是集成在 CKEditor 或 FCKEditor 中，以便在编辑器中插入超链接或图像时可以直接上传，也可通过浏览直接插入编辑器中。并且 CKFinder 提供了权限接口，以避免没有权限的人去上传文件。CKFinder 是收费的；如果不购买 license，那么就是处于演示模式下使用，禁止用于商业用途。

本篇文章主要介绍ckeditor_3.6.4+ckfinder_java_2.3
CKEditor下载地址：http:///download            在线演示地址：http:///demo
ckeditor-java-core-3.5.3.zip 下载地址：http:///download   
CKFinder下载地址：http:///ckfinder/trial
1、解压ckeditor_3.6.4.zip，然后打开ckeditor文件夹，只需保留：images、lang、plugins、 skins、themes、ckeditor_basic.js、ckeditor.js、config.js、contents.css即可
其他的文件可以删除。然后将整个ckeditor放在web工程下，与WEB-INF处于同一级目录。
2、将ckeditor-java-core-3.5.3.zip解压，然后将ckeditor-java-core-3.5.3.jar包拷贝至web项目的lib下。

3、将ckfinder_java_2.3.zip解压，然后将CKFinderJava.war解压后，将WEB-INF里面的lib下面所有的 jar包拷贝至web项目的lib下，将ckfinder\_sources\CKFinder for Java\WebApp\src\main\webapp下的ckfinder文件夹拷贝至web工程下，与ckeditor保持同级，将其下的WEB- INF下面的config.xml文件拷贝至web项目的WEB-INF下，并根据自己的项目稍作调整即可，如下：

[html] view plaincopy
  1. <config>  
  2.     <enabled>true</enabled>  
  3.     <baseDir></baseDir>  
  4.     <baseURL>/Software_Site/View/UploadFiles/</baseURL>  <span style="font-family:arial,sans-serif,verdana,helvetica; color:#404040"><span style="font-size:14px; line-height:25px"><!--这里改成自己想保存的路径就可以了--></span></span>  
  5.     <licenseKey></licenseKey>  
  6.     <licenseName></licenseName>  
  7.     <imgWidth>1600</imgWidth>  
  8.     <imgHeight>1200</imgHeight>  
  9.     <imgQuality>80</imgQuality>  
  10.     <uriEncoding>UTF-8</uriEncoding>  
  11.     <forceASCII>false</forceASCII>  
  12.     <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>  
  13.     <checkDoubleExtension>true</checkDoubleExtension>  
  14.     <checkSizeAfterScaling>true</checkSizeAfterScaling>  
  15.     <secureImageUploads>true</secureImageUploads>  
  16.     <htmlExtensions>html,htm,xml,js</htmlExtensions>  
  17.     <hideFolders>  
  18.         <folder>.svn</folder>  
  19.         <folder>CVS</folder>  
  20.     </hideFolders>  
  21.     <hideFiles>  
  22.         <file>.*</file>  
  23.     </hideFiles>  
  24.     <defaultResourceTypes></defaultResourceTypes>  
  25.     <types>  
  26.         <type name="Files">  
  27.             <url>%BASE_URL%files/</url>  
  28.             <directory>%BASE_DIR%files</directory>  
  29.             <maxSize>0</maxSize>  
  30.             <allowedExtensions>7z,aiff,asf,avi,bmp,csv,doc,docx,fla,flv,gif,gz,gzip,jpeg,jpg,mid,mov,mp3,mp4,mpc,mpeg,mpg,ods,odt,pdf,png,ppt,pptx,pxd,qt,ram,rar,rm,rmi,rmvb,rtf,sdc,sitd,swf,sxc,sxw,tar,tgz,tif,tiff,txt,vsd,wav,wma,wmv,xls,xlsx,zip  
  31.             </allowedExtensions>  
  32.             <deniedExtensions></deniedExtensions>  
  33.         </type>  
  34.         <type name="Images">  
  35.             <url>%BASE_URL%images/</url>  
  36.             <directory>%BASE_DIR%images</directory>  
  37.             <maxSize>0</maxSize>  
  38.             <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>  
  39.             <deniedExtensions></deniedExtensions>  
  40.         </type>  
  41.         <type name="Flash">  
  42.             <url>%BASE_URL%flash/</url>  
  43.             <directory>%BASE_DIR%flash</directory>  
  44.             <maxSize>0</maxSize>  
  45.             <allowedExtensions>swf,flv</allowedExtensions>  
  46.             <deniedExtensions></deniedExtensions>  
  47.         </type>  
  48.     </types>  
  49.     <accessControls>  
  50.         <accessControl>  
  51.             <role>*</role>  
  52.             <resourceType>*</resourceType>  
  53.             <folder>/</folder>  
  54.             <folderView>true</folderView>  
  55.             <folderCreate>true</folderCreate>  
  56.             <folderRename>true</folderRename>  
  57.             <folderDelete>true</folderDelete>  
  58.             <fileView>true</fileView>  
  59.             <fileUpload>true</fileUpload>  
  60.             <fileRename>true</fileRename>  
  61.             <fileDelete>true</fileDelete>  
  62.         </accessControl>  
  63.     </accessControls>  
  64.     <thumbs>  
  65.         <enabled>true</enabled>  
  66.         <url>%BASE_URL%_thumbs/</url>  
  67.         <directory>%BASE_DIR%_thumbs</directory>  
  68.         <directAccess>false</directAccess>  
  69.         <maxHeight>100</maxHeight>  
  70.         <maxWidth>100</maxWidth>  
  71.         <quality>80</quality>  
  72.     </thumbs>  
  73.     <plugins>  
  74.         <plugin>  
  75.             <name>imageresize</name>  
  76.             <class>com.ckfinder.connector.plugins.ImageResize</class>  
  77.             <params>  
  78.                 <param name="smallThumb" value="90x90"></param>  
  79.                 <param name="mediumThumb" value="120x120"></param>  
  80.                 <param name="largeThumb" value="180x180"></param>  
  81.             </params>  
  82.         </plugin>  
  83.         <plugin>  
  84.             <name>fileeditor</name>  
  85.             <class>com.ckfinder.connector.plugins.FileEditor</class>  
  86.             <params></params>  
  87.         </plugin>  
  88.     </plugins>  
  89.     <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>  
  90. </config>  
4、然后在web.xml下添加上传用的配置如下：
[html] view plaincopy
  1. <!-- ckfinder开始 -->  
  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>  
  18.             /ckfinder/core/connector/java/connector.java  
  19.         </url-pattern>  
  20.     </servlet-mapping>  
  21.     <session-config>  
  22.         <session-timeout>10</session-timeout>  
  23.     </session-config>  
  24.     <!--ckeditor结束 -->  
5、然后修改ckeditor下面的config.js，如下：
[javascript] view plaincopy
  1. /* 
  2. Copyright (c) 2003-2011, CKSource - Frederico Knabben. All rights reserved. 
  3. For licensing, see LICENSE.html or http:///license 
  4. */  
  5.   
  6. CKEDITOR.editorConfig = function( config )  
  7. {  
  8.     // Define changes to default configuration here. For example:  
  9.     // config.language = 'fr';  
  10.     // config.uiColor = '#AADC6E';  
  11.         config.language = 'zh-cn' ;  
  12.         config.skin = 'office2003';   
  13. };  
6、然后就是CKEditor+CKFinder在jsp页面中应用，我这里仅仅演示上传图片的部分：

  a、首先在页面的头部加上这两句：

[javascript] view plaincopy
  1. <%@ taglib uri="http://" prefix="ckeditor"%>  
  2. <%@ taglib uri="http://" prefix="ckfinder"%>  
  b、其次是在<head></head>标签之间加入这两句：
[javascript] view plaincopy
  1. <script type="text/javascript"  
  2.             src="/Software_Site/ckeditor/ckeditor.js">  
  3. <script type="text/javascript"  
  4.             src="/Software_Site/ckfinder/ckfinder.js">  
 c、实现部分如下：
[html] view plaincopy
  1. <textarea rows="15" cols="60" id="onlineArticle.text" name="onlineArticle.text"></textarea>  
  2. <ckfinder:setupCKEditor basePath="/Software_Site/ckfinder/" editor="onlineArticle.text" />  
  3. <ckeditor:replace replace="onlineArticle.text" basePath="/Software_Site/ckeditor/" />  

OK!到这里就可以实现了。

参考网址：

lpz283929516网友：http://blog.csdn.net/lpz283929516/article/details/8286383

jian85733547网友：http://blog.csdn.net/jian85733547/article/details/5911866

    本站是提供个人知识管理的网络存储空间，所有内容均由用户发布，不代表本站观点。请注意甄别内容中的联系方式、诱导购买等信息，谨防诈骗。如发现有害或侵权内容，请点击一键举报。
    转藏 分享 献花（0）

    来自： 看见就非常 > 《server》

    举报/认领

    0条评论

    发表

    请遵守用户 评论公约

    类似文章 更多