项目使用中,需要用到文本编辑功能,于是就很自然的想到了fckeditor。google一下,发现已经升级到ckeditor了。下载之后,发现是我想要的那种效果,(原因是fckeditor以前的版本无论是上传图片还是其他操作,只要是弹出fckdialog.html页面,就会包含页面具体地址),而且界面也做得很好看。可是下载时发现,竟然没有jsp版的,无奈发了封email给官方,第二天收到邮件说是支持的,但是没有匹配的ckfinder,很遗憾,不能上传图片了(到现在还没找到好的办法),只好又换回fckeditor2.3了。
扯淡了这么多,该进入正题了。
1:需要将两个包加入到web项目中commons-fileupload.jar和FCKeditor-2.3.jar,web-inf下加入FCKeditor.tld;
2:将fckeditor的解压后文件,FCKeditor文件拷到webRoot下,可考虑瘦身一下;
3:在web.xml中加入如下片段:
<!-- FCKEditor配置 --> <servlet> <servlet-name>Connector</servlet-name> <servlet-class> com.fredck.FCKeditor.connector.ConnectorServlet </servlet-class> <init-param> <param-name>baseDir</param-name> <param-value>/UserFiles/</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet> <servlet-name>SimpleUploader</servlet-name> <servlet-class> com.fredck.FCKeditor.uploader.SimpleUploaderServlet </servlet-class> <init-param> <param-name>baseDir</param-name> <param-value>/UserFiles/</param-value> </init-param> <init-param> <param-name>debug</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>enabled</param-name> <param-value>true</param-value> </init-param> <init-param> <param-name>AllowedExtensionsFile</param-name> <param-value></param-value> </init-param> <init-param> <param-name>DeniedExtensionsFile</param-name> <param-value> php|php3|php5|phtml|asp|aspx|ascx|jsp|cfm|cfc|pl|bat|exe|dll|reg|cgi </param-value> </init-param> <init-param> <param-name>AllowedExtensionsImage</param-name> <param-value>jpg|gif|jpeg|png|bmp</param-value> </init-param> <init-param> <param-name>DeniedExtensionsImage</param-name> <param-value></param-value> </init-param> <init-param> <param-name>AllowedExtensionsFlash</param-name> <param-value>swf|fla</param-value> </init-param> <init-param> <param-name>DeniedExtensionsFlash</param-name> <param-value></param-value> </init-param> <load-on-startup>1</load-on-startup> </servlet> <servlet-mapping> <servlet-name>Connector</servlet-name> <url-pattern> /fckeditor/editor/filemanager/browser/default/connectors/jsp/connector </url-pattern> </servlet-mapping> <servlet-mapping> <servlet-name>SimpleUploader</servlet-name> <url-pattern> /fckeditor/editor/filemanager/upload/simpleuploader </url-pattern> </servlet-mapping> <!-- 结束 -->
OK,配置完成了。
现在如果要使用,在相应的jsp页面中添加标签
<FCK:editor id="nr" width="100%" height="500" basePath="/项目名/fckeditor/"
imageBrowserURL="/项目名/fckeditor/editor/filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector"
linkBrowserURL="/项目名/fckeditor/editor/filemanager/browser/default/browser.html?Connector=connectors/jsp/connector"
flashBrowserURL="/项目名/fckeditor/editor/filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/jsp/connector"
imageUploadURL="/项目名/fckeditor/editor/filemanager/upload/simpleuploader?Type=Image"
linkUploadURL="/项目名/fckeditor/editor/filemanager/upload/simpleuploader?Type=File"
flashUploadURL="/项目名/fckeditor/editor/filemanager/upload/simpleuploader?Type=Flash">
</FCK:editor>
当然,事先要在jsp中添加标签引入
<%@ taglib uri="/WEB-INF/FCKeditor.tld" prefix="FCK" %>
然后,后台只要request.get就能拿到了。
配置问题就不啰嗦了,fckconfig.js搞定。项目需要,图片上传时只要预览和上传,那就改文件吧。在fck_image.js找到相应的tab设置,注释掉
function OnDialogTabChange( tabCode ) { ShowE('divInfo' , ( tabCode == 'Info' ) ) ; // ShowE('divLink' , ( tabCode == 'Link' ) ) ; ShowE('divUpload' , ( tabCode == 'Upload' ) ) ; // ShowE('divAdvanced' , ( tabCode == 'Advanced' ) ) ; }
搞定!
关于分页符的问题,可以做到真分页和假分页。
真分页的话,没什么说的,建表,将内容按照
<div style=\"PAGE-BREAK-AFTER: always\"><span style=\"DISPLAY: none\"> </span></div>
截取后入库,显示的时候再按页去拿。
我这里,小小偷懒一下,将内容分开后形成数组,按页显示数组的每个元素的值,只要传页码就ok。问题是只能是一种浏览器。因为在ff下,分页符为
<div style=\"PAGE-BREAK-AFTER: always\"><span style=\"DISPLAY: none;\"> </span></div>
多了个";"号,又因为项目美工只在ie下做的demo,没考虑浏览器的兼容性,所以ff我就不管了(反正ff连有些正常的页面都显示不出来)。
不过还是很遗憾,关于地址栏的问题始终没有解决,期待中......