FckEditor java 2.6.6的JSP 配置方法详解

开发网站，编辑器是个绕不过去的坎，自己开发，费时费力不说，问题也一定很多。asp时期，使用fckeditor，配置非常方便，各项功能都没有任何问题，但jsp版的，试了几次，编辑器功能倒是大部分正常了，但上传功能总是不顺。

     于是网上搜索，找到一些文章，但配置时或多或少都是还是有问题，于是结合网友的文章和自己配置过程，记录下来。

一：从官方网站下载fckeditor核心文件 ，http://ckeditor.com/download，现在最新版本是2.6.6

二：下载java版的文件上传组件 ，http://sourceforge.net/projects/fckeditor/files/FCKeditor.Java/2.6/

三：下载最后一个jar包 ：www.slf4j.org/dist/ ，找到slf4j-1.5.8.zip，下载就行了。（其实这个已经不用单独下载了，在fckeditor-java-demo-2.6.war文件中已包含该jar包）

准备文件已全部下载好了，下面开始配置吧，

四：基本配置与优化 ，解压FCKeditor_2.6.6.zip，会得到一个文件夹fckeditor，全部拷贝到工程的根目录下，只保留fckconfig.js，fckeditor.js，fckstyles.xml，fcktempletes.xml，fckpackager.xml和 fckeditor文件夹，删除所有以“_”开头的文件和文件夹 ，（这是测试或demo或是 temp文件，无用），

五： 解压fckeditor-java-demo-2.6.war，拷贝lib下的所有xx.jar到，你的项目/web-inf/lib下

六： 解压slf4j-1.5.8.zip，拷贝slf4j-jdk14-1.5.8.jar到，你的项目 /web-inf/lib下。这一步也可以略过了！

七：编辑web.xml ，加入（新版本的去掉了很多东西，用以前版本的方法，在web.xml文件中进行参数配置已经没用了，试过很多参数都没用）
 

XML/HTML代码

1. <servlet>  
2.    <servlet-name>FCKConnector</servlet-name>  
3.    <servlet-class>net.fckeditor.connector.ConnectorServlet</servlet-class>  
4.    <load-on-startup>1</load-on-startup>  
5. </servlet>  
6. <servlet-mapping>  
7.    <servlet-name>FCKConnector</servlet-name>  
8.    <url-pattern>/fckeditor/editor/filemanager/connectors/*</url-pattern>  
9. </servlet-mapping>  

八：创建fckeditor.properties文件， 在src下(编译之后处于 classes目录中)，加入
connector.userActionImpl = net.fckeditor.requestcycle.impl.UserActionImpl
注：default.properties可以在fckeditor-java-core-2.5.jar的net/fckeditor /handlers/找到

九：配置完毕 ，开始使用吧

我试了两种方法：

1，在</head>前面添加如下代码

XML/HTML代码

1. <script type="text/javascript" src="<%=basePath%>/fckeditor/fckeditor.js"></script>//这里在路径前面加上了="<%=basePath%>，解决了写绝对路径的麻烦   
2.     <script type="text/javascript">  
3.        window.onload = function()   
4.          {   
5.                   var oFCKeditor = new FCKeditor( 'content','100%','400','Default' ) ;   
6.           oFCKeditor.BasePath   = "<%=basePath%>/fckeditor/" ;//该路径指示fckeditor的根路径，这里在路径前面加上了="<%=basePath%>，解决了写绝对路径的麻烦   
7. //这里content和下面的textarea的name参数必须对应   
8. //后面依次是宽、高和工具栏设置可以是Default或Basic   
9.           oFCKeditor.ReplaceTextarea() ;   
10.        
11.      }   
12.       </script>  

然后在需要显示编辑器的地方插入：

XML/HTML代码

1. <textarea name="content"><!--这里是输入框的默认值--></textarea>"><!--content和上面的一定得对应起来，这里的content就是表单传递的参数名-->  

2，这个是fckeditor-java-demo-2.6.war中本身带的例子：

在</head>前插入

XML/HTML代码

1. <script type="text/javascript">  
2.             function FCKeditor_OnComplete(editorInstance) {   
3.                 window.status = editorInstance.Description;   
4.             }   
5.         </script>  

表单写法如下：

XML/HTML代码

1. <form action="sampleposteddata.jsp" method="post" target="_blank">  
2.         <div><input id="EditorDefault" name="EditorDefault" value="This is some <strong>sample text</strong>. You are using <a href="http://www.fckeditor.net">FCKeditor</a>." type="hidden" /><iframe id="EditorDefault___Frame" frameborder="0" height="200" scrolling="no" width="100%" src="/fckeditor-java-demo-2.6/fckeditor/editor/fckeditor.html?InstanceName=EditorDefault&Toolbar=Default"> </iframe></div>  
3.   
4.         <br />  
5.         <input type="submit" value="Submit" /></form>  

就这些，我就是按照该步骤配置成功的！

通过以上这些配置，fckeditor所以功能已经可以正常使用了，但如果要设置Fckeditor的运行参数，还得继续做一些设置工作，像编辑器的工具栏风格，按钮布局，字体，表情图片等，都可以通过fckconfig.js进行设置。但有些参数，如上传文件路径，文件自动重命名，等还需要用到另外一个重要文件fckeditor.properties。

当然，Fckeditor是开源的，你可以自己下载源代码，修改相应的文件，或者用别人修改好的东西。这里主要介绍一种设置的方法。

新版本的2.6.6的，好像做了很多调整，如SimpleUploader好像已经去掉了，以前很多设置都是基于这个的。前面通过web.xml配置SimpleUploader和servlet，也成功了，但很多功能不太正常，呵呵，扯远了，回到主题。

至于Fckconfig.js的设置方法网上有很多，这里也有一篇http://www.solnis.com/article/tech/158.htm

fckeditor.properties文件是配置时必须的，直接放在src目录下，编译的时候会编译到calsses目录去的。在fckeditor-java-2.6-src.tar.gz里解压后java-core/src/main/resources/net/fckeditor/handlers下面有个default.properties文件，能设置的参数都在这个文件里了，内容如下

XML/HTML代码

1. #   
2. # FCKeditor - The text editor for Internet - http://www.fckeditor.net   
3. # Copyright (C) 2004-2010 Frederico Caldeira Knabben   
4. #   
5. # == BEGIN LICENSE ==   
6. #   
7. # Licensed under the terms of any of the following licenses at your   
8. # choice:   
9. #   
10. #  - GNU General Public License Version 2 or later (the "GPL")   
11. #    http://www.gnu.org/licenses/gpl.html   
12. #   
13. #  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")   
14. #    http://www.gnu.org/licenses/lgpl.html   
15. #   
16. #  - Mozilla Public License Version 1.1 or later (the "MPL")   
17. #    http://www.mozilla.org/MPL/MPL-1.1.html   
18. #   
19. # == END LICENSE ==   
20. #   
21. # Default properties for FCKeditor.Java   
22. #   
23. # @version $Id: default.properties 4785 2009-12-21 20:10:28Z mosipov $    
24.   
25. # default allowed extensions settings   
26. connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip   
27. connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png   
28. connector.resourceType.flash.extensions.allowed = swf|fla   
29. connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv   
30.   
31. # default resource type paths   
32. connector.resourceType.file.path = /file   
33. connector.resourceType.image.path = /image   
34. connector.resourceType.flash.path = /flash   
35. connector.resourceType.media.path = /media   
36.   
37. # Due to security issues with Apache modules, it is recommended to leave this    
38. # setting enabled.   
39. connector.forceSingleExtension = true  
40.   
41. # base URL path for the userfiles   
42. connector.userFilesPath = /userfiles   
43.   
44. # base system path on the backend for the userfiles   
45. connector.userFilesAbsolutePath = /userfiles   
46.   
47. # Instructs the Connector to check, if the uploaded image is really one   
48. connector.secureImageUploads = true  
49.   
50. # directory of the editor relative to the context root   
51. fckeditor.basePath = /fckeditor   
52.   
53. # default height of the editor   
54. fckeditor.height = 200  
55.   
56. # default toolbar set of the editor   
57. fckeditor.toolbarSet = Default  
58.   
59. # default width of the editor   
60. fckeditor.width = 100%   
61.   
62. # default implementations   
63. connector.impl = net.fckeditor.connector.impl.ContextConnector   
64. connector.userActionImpl = net.fckeditor.requestcycle.impl.DisabledUserAction   
65. connector.userPathBuilderImpl = net.fckeditor.requestcycle.impl.ContextPathBuilder   
66. localization.localeResolverImpl = net.fckeditor.localization.impl.AcceptLanguageHeaderResolver   

我修改后的

XML/HTML代码

1. #   
2. # FCKeditor - The text editor for Internet - http://www.fckeditor.net   
3. # Copyright (C) 2004-2010 Frederico Caldeira Knabben   
4. #   
5. # == BEGIN LICENSE ==   
6. #   
7. # Licensed under the terms of any of the following licenses at your   
8. # choice:   
9. #   
10. #  - GNU General Public License Version 2 or later (the "GPL")   
11. #    http://www.gnu.org/licenses/gpl.html   
12. #   
13. #  - GNU Lesser General Public License Version 2.1 or later (the "LGPL")   
14. #    http://www.gnu.org/licenses/lgpl.html   
15. #   
16. #  - Mozilla Public License Version 1.1 or later (the "MPL")   
17. #    http://www.mozilla.org/MPL/MPL-1.1.html   
18. #   
19. # == END LICENSE ==   
20. #   
21. # @version $Id: fckeditor.properties 4785 2009-12-21 20:10:28Z mosipov $   
22.   
23. # 允许上传的文件类型   
24. connector.resourceType.file.extensions.allowed = 7z|aiff|asf|avi|bmp|csv|doc|fla|flv|gif|gz|gzip|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|ods|odt|pdf|png|ppt|pxd|qt|ram|rar|rm|rmi|rmvb|rtf|sdc|sitd|swf|sxc|sxw|tar|tgz|tif|tiff|txt|vsd|wav|wma|wmv|xls|xml|zip   
25. connector.resourceType.image.extensions.allowed = bmp|gif|jpeg|jpg|png   
26. connector.resourceType.flash.extensions.allowed = swf|fla|flv   
27. connector.resourceType.media.extensions.allowed = aiff|asf|avi|bmp|fla|flv|gif|jpeg|jpg|mid|mov|mp3|mp4|mpc|mpeg|mpg|png|qt|ram|rm|rmi|rmvb|swf|tif|tiff|wav|wma|wmv   
28.   
29. # 上传资源默认路径   
30. connector.resourceType.file.path = /files   
31. connector.resourceType.image.path = /image   
32. connector.resourceType.flash.path = /flash   
33. connector.resourceType.media.path = /media   
34.     
35. # 强制一个文件名只能有一个“.”符号   
36. # Due to security issues with Apache modules, it is recommended to leave this    
37. # setting enabled.   
38. connector.forceSingleExtension = true  
39.   
40. # 默认的上传路径，为上下文的相对路径，设置上传后的文件链接   
41. connector.userFilesPath = /Uploadfiles   
42.   
43. # 上传文件的物理路径，相对于文件系统而言，设置上传文件的路径-base system path on the backend for the userfiles   
44. connector.userFilesAbsolutePath = /Uploadfiles   
45.     
46. # 是否显示全路径   
47. connector.fullUrl = false  
48.     
49. # 这个如果设置为true，则Fckeditor会检查目录中是否有相同的文件，如果有就   
50. # 会对这个文件进行重命名   
51. connector.secureImageUploads = true  
52.     
53. # fckeditor相对于Context的路径   
54. fckeditor.basePath = /fckeditor   
55.     
56. # fckeditor的默认高度   
57. #fckeditor.height = 200  
58.     
59. # 默认的工具栏   
60. #fckeditor.toolbarSet = Default  
61.     
62. # 默认的宽度   
63. #fckeditor.width = 100%   
64.     
65. #上传文件必须参数，这个参数很重要，默认情况是disabledUserAction，是无法上传文件的，上传会提示无权限   
66. connector.userActionImpl = net.fckeditor.requestcycle.impl.EnabledUserAction   
67. # 默认设置的几个参数   
68. connector.impl = net.fckeditor.connector.impl.ContextConnector   
69. connector.userPathBuilderImpl = net.fckeditor.requestcycle.impl.ContextPathBuilder   
70. localization.localeResolverImpl = net.fckeditor.localization.impl.AcceptLanguageHeaderResolver   
71.   
72. # 一些提示信息   
73. message.enabled_tag.compatible_browser.no = 你的浏览器不兼容！   
74. message.enabled_tag.compatible_browser.yes = 你的浏览器完全兼容！   
75. message.enabled_tag.connector.file_browsing.disabled = The Connector is disabled for FileBrowsing   
76. message.enabled_tag.connector.file_browsing.enabled = The Connector is enabled for FileBrowsing   
77. message.enabled_tag.connector.file_upload.disabled = The Connector is disabled for FileUpload   
78. message.enabled_tag.connector.file_upload.enabled = The Connector is enabled for FileUpload  

至此，已经全部配置完成啦！

部分内容，参照了这里：http://blog.csdn.net/collonn/archive/2010/03/26/5419322.aspx