CKEditor+CKFinder+JSP实现在线编辑器上传文件(包括

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

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

本篇文章主要介绍ckeditor_3.6.4+ckfinder_java_2.3
CKEditor下载地址: 在线演示地址:
ckeditor-java-core-3.5.3.zip 下载地址:
CKFinder下载地址:
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下,并根据自己的项目稍作调整即可,如下:

<config>
 <enabled>true</enabled>
 <baseDir></baseDir>
 <baseURL>/Software_Site/View/UploadFiles/</baseURL>  <span><span><!--这里改成自己想保存的路径就可以了--></span></span>
 <licenseKey></licenseKey>
 <licenseName></licenseName>
 <imgWidth>1600</imgWidth>
 <imgHeight>1200</imgHeight>
 <imgQuality>80</imgQuality>
 <uriEncoding>UTF-8</uriEncoding>
 <forceASCII>false</forceASCII>
 <userRoleSessionVar>CKFinder_UserRole</userRoleSessionVar>
 <checkDoubleExtension>true</checkDoubleExtension>
 <checkSizeAfterScaling>true</checkSizeAfterScaling>
 <secureImageUploads>true</secureImageUploads>
 <htmlExtensions>html,htm,xml,js</htmlExtensions>
 <hideFolders>
  <folder>.svn</folder>
  <folder>CVS</folder>
 </hideFolders>
 <hideFiles>
  <file>.*</file>
 </hideFiles>
 <defaultResourceTypes></defaultResourceTypes>
 <types>
  <type>
   <url>%BASE_URL%files/</url>
   <directory>%BASE_DIR%files</directory>
   <maxSize>0</maxSize>
   <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
   </allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
  <type>
   <url>%BASE_URL%images/</url>
   <directory>%BASE_DIR%images</directory>
   <maxSize>0</maxSize>
   <allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
  <type>
   <url>%BASE_URL%flash/</url>
   <directory>%BASE_DIR%flash</directory>
   <maxSize>0</maxSize>
   <allowedExtensions>swf,flv</allowedExtensions>
   <deniedExtensions></deniedExtensions>
  </type>
 </types>
 <accessControls>
  <accessControl>
   <role>*</role>
   <resourceType>*</resourceType>
   <folder>/</folder>
   <folderView>true</folderView>
   <folderCreate>true</folderCreate>
   <folderRename>true</folderRename>
   <folderDelete>true</folderDelete>
   <fileView>true</fileView>
   <fileUpload>true</fileUpload>
   <fileRename>true</fileRename>
   <fileDelete>true</fileDelete>
  </accessControl>
 </accessControls>
 <thumbs>
  <enabled>true</enabled>
  <url>%BASE_URL%_thumbs/</url>
  <directory>%BASE_DIR%_thumbs</directory>
  <directAccess>false</directAccess>
  <maxHeight>100</maxHeight>
  <maxWidth>100</maxWidth>
  <quality>80</quality>
 </thumbs>
 <plugins>
  <plugin>
   <name>imageresize</name>
   <class>com.ckfinder.connector.plugins.ImageResize</class>
   <params>
    <param value="90x90"></param>
    <param value="120x120"></param>
    <param value="180x180"></param>
   </params>
  </plugin>
  <plugin>
   <name>fileeditor</name>
   <class>com.ckfinder.connector.plugins.FileEditor</class>
   <params></params>
  </plugin>
 </plugins>
 <basePathBuilderImpl>com.ckfinder.connector.configuration.ConfigurationPathBuilder</basePathBuilderImpl>
</config>

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/19943.html