cdeditor3.6.5+ckfinder2.0.2+jsp编辑器配置 支持服务器浏览/上传图片、Flash

一、相信很多人都用过大名鼎鼎的FckEditor， 最新又出来了个ckEditor， 令人一下子搞不清楚， 到官方网站看看才知道FckEditor在2.6版本之后就改名为ckEditor了， 在这里特别说明一下， 以免混淆，因为网上搜出来的大多都是FckEditor相关配置的文章。

二、FckEditor里有java版本的配置，相信有些同行用过，支持php、asp.net、java版本，现在一下子变为ckEditor了。配置简单的编辑器很简单，这里不多说了，我想大多数人都希望能用到编辑器里的浏览/插入图片功能吧， 毕竟一条新闻没个图片说不过去。 当然我们自己做个上传功能，然后复制URL地址插入到URL里也是可以的。 但是这样客户操作难度太高了。

三、这里介绍一下解决办法，看到有个哥们的文章说ckEditor理把自带的上传功能去掉了， 需要修改config.js文件里的几个属性

config.filebrowserBrowseUrl = '/js/ckfinder/ckfinder.htm';
config.filebrowserImageBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Images';
config.filebrowserFlashBrowseUrl = '/js/ckfinder/ckfinder.htm?type=Flash';
config.filebrowserUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';
config.filebrowserImageUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images';
config.filebrowserFlashUploadUrl = '/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';

需要自己写这个上传附件和浏览服务器文件的方法， 这哥们还真的自己写了， 遗憾的是只给出部分代码。 自己写上传文件和浏览文件夹虽然说不是什么难事， 但难免有些繁琐费时。

四、于是自己抱有一点侥幸和偷懒的心理再google了几下， 发现一个关键字很频繁出现： cdeditor+ckfinder 后面老跟着asp.net php 之类的。于是就不服气滴想，难道就没有支持java的吗？ ckfinder不是专门为asp.net量身定做的吧？ 于是又仔细看了看cdeditor的官方网站， 然后点击了一下ckfinder链接， 发现ckfinder已经出了多个语言版本(php、asp.net等） 支持java是在2.0.2版本之后才出的， 这也就难怪关于cdeditor3.6.5+ckfinder2.0.2+jsp的配置介绍文章很少了，

这里方便大家下载我给个地址：

http://ckeditor.com/download

http://ckfinder.com/download 注意2.0.2版本以及以上的才支持java （收费的）

先上个效果图再贴代码！

点击插入图片图标

浏览/上传图片窗口

整合步骤：（注意红色字体部分是前后相呼应的）

1 下载的ckeditor-java-3.6.2.rar和ckfinder_java_2.0.2.zip解压，jsp头部引入两个头文件

<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>

2 在web.xml里添加， 注意ckfinder版本是2.0.2 如果超过这版本，servlet的类名不一样小心！

<!-- ckeditor和ckfinder整合上传图片 开始 --> <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/ckfinder-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> /js/ckfinder/core/connector/java/connector.java </url-pattern> </servlet-mapping> <!-- ckeditor和ckfinder整合上传图片 结束 -->

3 在建立文件WEB-INF/ckfinder-config.xml 内容如下（ 红色的upload/ckfinder/代表工程里的路径，可以对照eclipse截图

<config> <enabled>true</enabled> <baseDir></baseDir> <baseURL>upload/ckfinder/</baseURL> <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>10m</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>2m</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>20m</maxSize> <allowedExtensions>swf,flv</allowedExtensions> <deniedExtensions></deniedExtensions> </type> </types> <accessControls> <accessControl> <role>*</role> <resourceType>*</resourceType> <folder>/</folder> <folderView>true</folderView> <folderCreate>true</folderCreate> <folderRename>false</folderRename> <folderDelete>false</folderDelete> <fileView>true</fileView> <fileUpload>true</fileUpload> <fileRename>false</fileRename> <fileDelete>false</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>

目录结构

4 修改/js/ckeditor/config.js里的内容如下：

CKEDITOR.editorConfig = function( config ){ config.pasteFromWordIgnoreFontFace = true; config.language='zh-cn'; config.uiColor='#AADC6E'; config.enterMode=CKEDITOR.ENTER_DIV; config.shiftEnterMode=CKEDITOR.BR; config.skin='office2003'; config.extraPlugins='autogrow'; config.resize_maxHeight = 1000; config.resize_maxWidth = 960;//改变大小的最大宽度 config.resize_minHeight = 250; //改变大小的最小高度 config.resize_minWidth = 750;//改变大小的最小宽度 config.toolbar = [ '/', ['Preview','Cut','Copy','Paste','PasteFromWord','Print','Undo','Redo','Find','RemoveFormat ','Bold','Italic','Underline','Strike','-','NumberedList','BulletedList'], ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Image','Table','HorizontalRule','Smiley'], ['Styles','Format','Font','FontSize'], ]; config.filebrowserBrowseUrl='/js/ckfinder/ckfinder.html'; config.filebrowserImageBrowseUrl='/js/ckfinder/ckfinder.html?type=Images'; config.filebrowserFlashBrowseUrl='/js/ckfinder/ckfinder.html?type=Flash'; config.filebrowserUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files'; config.filebrowserImageUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'; config.filebrowserFlashUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash'; config.filebrowserWindowWidth='1000'; config.filebrowserWindowHeight='700'; };

5 复制这几个jar包到WEB-INF/lib （前面贴出的那两个压缩文件解压之后有的

CKFinder-2.0.2.jar
CKFinderPlugin-FileEditor-2.0.2.jar
CKFinderPlugin-ImageResize-2.0.2.jar
Thumbnailator-0.3.3.jar
commons-fileupload-1.2.2.jar
commons-io-2.0.1.jar

6 在jsp页面写代码：

<script type="text/javascript" src="${base}/js/ckeditor/ckeditor.js"></script>
<script type="text/javascript" src="${base}/js/ckfinder/ckfinder.js"></script>

<textarea id="content" name="content"></textarea>

<script type="text/javascript">
CKEDITOR.replace('content',{height:350});//设置编辑器高度
</script>

到此就大功告成啦， 运行截图就是上面那3张！ 详细的配置属性请网上参考资料，都在ckfinder-config.xml里，可以控制上传的文件类型、大小、能否删除、能否创建子文件夹等。