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

我就一直在琢磨如何才能实现在编编辑器的功能，由于家里的网是电信天翼的3G卡，有流量限制，如今也就剩下100M左右的流量了，上网也很费劲，于是狠心的上网找了一大堆的资料，终于实现了这样的功能，确实挺纠结的，这里我先给大家演示基本的搭建，下一篇文章演示在Struts2框架下的搭建。在分享我需要声明一下，这篇文章是参考几个网友提供的资料再加上自己的亲身实现，进行的一些修改，最终分享给大家。CKEditor是新一代的FCKeditor，是一个重新开发的版本。CKEditor是全球最优秀的网页在线文字编辑器之一，因其惊人的性能与可扩展性而广泛的被运用于各大网站。本篇文章主要介绍ckeditor_3.6.4+ckfinder_java_2.3
CKEditor下载地址：http://ckeditor.com/download 在线演示地址：http://ckeditor.com/demo
ckeditor-java-core-3.5.3.zip 下载地址：http://ckeditor.com/download
CKFinder下载地址：http://cksource.com/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\_sourcesCKFinder for JavaWebAppsrcmainwebapp下的ckfinder文件夹拷贝至web工程下，与ckeditor保持同级，将其下的WEB- INF下面的config.xml文件拷贝至web项目的WEB-INF下，并根据自己的项目稍作调整即可，如下：<config>
<enabled>true</enabled>
<baseDir></baseDir>
<baseURL>/Software_Site/View/UploadFiles/</baseURL> <span style="color: rgb（64, 64, 64）; font-family: arial, sans-serif, verdana, helvetica;"><span style="line-height: 25px; font-size: 14px;"><！--这里改成自己想保存的路径就可以了--></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 name="Files">
<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 name="Images">
<url>%BASE_URL%images/</url>
<directory>%BASE_DIR%images</directory>
<maxSize>0</maxSize>
<allowedExtensions>bmp,gif,jpeg,jpg,png</allowedExtensions>
<deniedExtensions></deniedExtensions>
</type>
<type name="Flash">
<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 name="smallThumb" value="90x90"></param>
<param name="mediumThumb" value="120x120"></param>
<param name="largeThumb" 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>

SSH2 struts2 FCKeditor在线编辑器实现struts2整合CKEditor和CKFinder实现上传相关资讯 CKEditor CKFinder

CKEditor v4.5.10 发布下载，可视（07月14日）
CKEditor 4.5.7 发布下载，可视化（02月05日）
CKEditor 5：富文本编辑器的未来（10/22/2015 08:25:58）

CKEditor v4.5.9 发布下载，可视化（05月15日）
CKEditor 4.5.6 发布下载，可视化（12/10/2015 09:10:00）
CKEditor 4.5.3 发布下载，可视化（08/20/2015 08:04:43）

本文评论查看全部评论（0）