ckeditor3.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的类名不一样小心！ 

[html] view plaincopy

1. <span style="font-size:16px;">    <!-- ckeditor和ckfinder整合上传图片   开始 -->  
2.     <servlet>  
3.         <servlet-name>ConnectorServlet</servlet-name>  
4.         <servlet-class><span style="color:#ff0000;">com.ckfinder.connector.ConnectorServlet</span></servlet-class>  
5.         <init-param>  
6.             <param-name>XMLConfig</param-name>  
7.             <param-value>/WEB-INF/<span style="color:#ff0000;">ckfinder-config.xml</span></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.             <span style="color:#ff0000;">/js/ckfinder/core/connector/java/connector.java</span>  
19.         </url-pattern>  
20.     </servlet-mapping>  
21.     <!-- ckeditor和ckfinder整合上传图片 结束 --></span>  

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

[html] view plaincopy

1. <span style="font-size:18px;"><config>  
2.     <enabled>true</enabled>  
3.     <baseDir></baseDir>  
4.     <baseURL><span style="color:#ff0000;"></span><span style="color:#ff0000;">upload/ckfinder/</span></baseURL>  
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>10m</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>2m</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>20m</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>false</folderRename>  
57.             <folderDelete>false</folderDelete>  
58.             <fileView>true</fileView>  
59.             <fileUpload>true</fileUpload>  
60.             <fileRename>false</fileRename>  
61.             <fileDelete>false</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></span>  

目录结构

 

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

[javascript] view plaincopy

1. <span style="font-size:18px;">CKEDITOR.editorConfig = function( config ){  
2.     config.pasteFromWordIgnoreFontFace = true;   
3.     config.language='zh-cn';  
4.     config.uiColor='#AADC6E';  
5.     config.enterMode=CKEDITOR.ENTER_DIV;  
6.     config.shiftEnterMode=CKEDITOR.BR;  
7.     config.skin='office2003';  
8.     config.extraPlugins='autogrow';  
9.     config.resize_maxHeight = 1000;  
10.     config.resize_maxWidth = 960;//改变大小的最大宽度  
11.     config.resize_minHeight = 250; //改变大小的最小高度  
12.     config.resize_minWidth = 750;//改变大小的最小宽度  
13.     config.toolbar = [  
14.                 '/',  
15.                 ['Preview','Cut','Copy','Paste','PasteFromWord','Print','Undo','Redo','Find','RemoveFormat ','Bold','Italic','Underline','Strike','-','NumberedList','BulletedList'],  
16.                 ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull','-','Image','Table','HorizontalRule','Smiley'],  
17.                 ['Styles','Format','Font','FontSize'],  
18.             ];  
19.     config.filebrowserBrowseUrl='/js/ckfinder/ckfinder.html';  
20.     config.filebrowserImageBrowseUrl=<span style="color:#ff0000;">'/js/ckfinder/ckfinder.html?type=Images'</span>;  
21.     config.filebrowserFlashBrowseUrl='/js/ckfinder/ckfinder.html?type=Flash';  
22.     config.filebrowserUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Files';  
23.     config.filebrowserImageUploadUrl='/<span style="color:#ff0000;">js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Images'</span>;  
24.     config.filebrowserFlashUploadUrl='/js/ckfinder/core/connector/java/connector.java?command=QuickUpload&type=Flash';  
25.     config.filebrowserWindowWidth='1000';  
26.     config.filebrowserWindowHeight='700';  
27. };</span>  

 

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里，可以控制上传的文件类型、大小、能否删除、能否创建子文件夹等。