FCKeditor 2.3.1 是功能完善的可視化編輯器,文件上傳管理部分功能已經支持asp,php,aspx...等等,唯獨尚未支持jsp,幸運的是Simone Chiaretta制作了Java 的整合文件FCKeditor.Java。
1. 下載最新版的FCKeditor
http://www.fckeditor.net/download/
目前最新版是:FCKeditor_2.3.2(我用的是2.3.1)和 FCKeditor.Java
(FCKeditor-2.3)
2. 簡介
解壓FCKeditor 2.3.1.zip后得到如下目錄結構:
FCKeditor_2.3.1
---editor
---_source (有的資料說要刪除此文件夾,刪除將會出現很多初始化js錯誤)
---css(樣式)
---dialog(editor所有的網頁對話框都在這里了)
---filemanager(文件上傳管理部分)
---browser(存放用于瀏覽選擇上傳到服務器的文件,創建文件夾的瀏覽器)
---defult
---connectors(asp、php 、aspx等實現文件瀏覽、創建文件夾的文件。java項目中用 connectorservlet.Java實現,所以可以刪除下面所有文件)
---upload(asp、php、aspx等實現文件上傳時的文件,java項目中用 servlet實現上傳,所以可以刪除下面所有文件)
---images(editor使用到的圖片)
---js
---lang (存放用于支持多語言的js文件)
---plugins(擴展插件)
---skins(editor皮膚,2.3.1版有default、office 2003和silvers三種)
fckconfig.js
fckeditor.js
fckstyles.xml
fcktemplates.xml
….其余文件刪掉即可
解壓FCKeditor 2.3.zip后得到如下目錄結構:
FCKeditor_2.3
---docs
---api(api文檔,介紹了類的功能和配置方法)
---src(java源文件)
---web
---_samples
---web-inf
---lib(存放FCKeditor-2.3.jar 和Apache文件上傳開源項目commons-fileupload.jar)
Web.xml
Build.xml
Readme.txt
3. demo
我的開發環境是eclipse3.1和Myeclipse4.1,jdk1.5,resin-pro-3.0.18
3.1 建立一個webproject,命名為FCKeditor
3.2 將FCKeditor_2.3.1下的editor文件夾和fckeditor.js,fckconfig.js,fckstyles.xml,fcktemplates.xml拷貝到FCKeditor/webroot下。
3.3 FCKeditor.java 2.3解壓后,把其中的web目錄下的WEB-INF目錄copy到FCKeditor/webroot下(里面有commons-fileupload.jar, FCKeditor-2.3.jar,web.xml等幾個文件), 再把其中的src目錄下的FCKeditor.tld文件copy到FCKeditor/webroot/WEB-INF/下,_samples文件夾拷貝到FCKeditor/webroot/下。
3.4 修改web.xml和FCKeditor/webroot/editor/fckconfig.js:
<web-app>
<display-name>FCKeditor Test Application</display-name>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
將在FCKeditor/editor/下創建Image和Flash文件夾,用于存放上傳文件
<param-value>/editor/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>調試時設為true
</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>
將在FCKeditor/editor/下創建Image和Flash文件夾,用于存放上傳文件
<param-value>/editor/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>調試時設為true
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value>修改成true
</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>
和fckconfig.js的ImageBrowserURL等對應
<url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
這里你可以按自己應用具體配置,需要和fckconfig.js的ImageUploadUrl等對應
<url-pattern>/editor/upload.do</url-pattern>
</servlet-mapping>
<welcome-file-list>配置歡迎文件
<welcome-file>_samples/index.jsp</welcome-file>
</welcome-file-list>
<taglib>
<taglib-uri>/etag</taglib-uri>配置FCKeditor自定義標簽
<taglib-location>/web-inf/FCKeditor.tld</taglib-location>
</taglib>
</web-app>
修改 fckconfig.js中:
FCKConfig.DefaultLanguage = 'zh-cn' ; 修改默認語言為簡體中文
把FCKConfig.LinkBrowserURL等的值替換成以下內容:
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/" + _FileBrowserLanguage + "/connector"
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/" + _FileBrowserLanguage + "/connector";
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/" + _FileBrowserLanguage + "/connector";
FCKConfig.LinkUploadURL = FCKConfig.BasePath + "filemanager/upload/" + _QuickUploadLanguage + "/connector?Type=File";
FCKConfig.ImageUploadURL=FCKConfig.BasePath + "upload.do?Type=Image";
FCKConfig.FlashUploadURL=FCKConfig.BasePath+ "upload.do?Type=Flash";
Connector參數的值完全可以修改,只要和web.xml中配置一致即可
3.5 有的例子說必須在FCKeditor/webroot/editor/下手工新建Image和Flash兩個文件夾,FCKeditor不會自己創建文件上傳的文件夾,否則無法上傳文件,將提示無權操作,在java應用下無需自己創建,ConnectorServlet會在你第一次執行文件瀏覽時,根據url的type參數,判斷baseDir下是否存在以type值為名字的文件夾,不存在就創建它。
3.6 FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域內可以使用Tab鍵。
找到: FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上幾種我們常用的字體
FCKConfig.FontNames
= '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
1. 下載最新版的FCKeditor
http://www.fckeditor.net/download/
目前最新版是:FCKeditor_2.3.2(我用的是2.3.1)和 FCKeditor.Java
(FCKeditor-2.3)
2. 簡介
解壓FCKeditor 2.3.1.zip后得到如下目錄結構:
FCKeditor_2.3.1
---editor
---_source (有的資料說要刪除此文件夾,刪除將會出現很多初始化js錯誤)
---css(樣式)
---dialog(editor所有的網頁對話框都在這里了)
---filemanager(文件上傳管理部分)
---browser(存放用于瀏覽選擇上傳到服務器的文件,創建文件夾的瀏覽器)
---defult
---connectors(asp、php 、aspx等實現文件瀏覽、創建文件夾的文件。java項目中用 connectorservlet.Java實現,所以可以刪除下面所有文件)
---upload(asp、php、aspx等實現文件上傳時的文件,java項目中用 servlet實現上傳,所以可以刪除下面所有文件)
---images(editor使用到的圖片)
---js
---lang (存放用于支持多語言的js文件)
---plugins(擴展插件)
---skins(editor皮膚,2.3.1版有default、office 2003和silvers三種)
fckconfig.js
fckeditor.js
fckstyles.xml
fcktemplates.xml
….其余文件刪掉即可
解壓FCKeditor 2.3.zip后得到如下目錄結構:
FCKeditor_2.3
---docs
---api(api文檔,介紹了類的功能和配置方法)
---src(java源文件)
---web
---_samples
---web-inf
---lib(存放FCKeditor-2.3.jar 和Apache文件上傳開源項目commons-fileupload.jar)
Web.xml
Build.xml
Readme.txt
3. demo
我的開發環境是eclipse3.1和Myeclipse4.1,jdk1.5,resin-pro-3.0.18
3.1 建立一個webproject,命名為FCKeditor
3.2 將FCKeditor_2.3.1下的editor文件夾和fckeditor.js,fckconfig.js,fckstyles.xml,fcktemplates.xml拷貝到FCKeditor/webroot下。
3.3 FCKeditor.java 2.3解壓后,把其中的web目錄下的WEB-INF目錄copy到FCKeditor/webroot下(里面有commons-fileupload.jar, FCKeditor-2.3.jar,web.xml等幾個文件), 再把其中的src目錄下的FCKeditor.tld文件copy到FCKeditor/webroot/WEB-INF/下,_samples文件夾拷貝到FCKeditor/webroot/下。
3.4 修改web.xml和FCKeditor/webroot/editor/fckconfig.js:
<web-app>
<display-name>FCKeditor Test Application</display-name>
<servlet>
<servlet-name>Connector</servlet-name>
<servlet-class>com.fredck.FCKeditor.connector.ConnectorServlet</servlet-class>
<init-param>
<param-name>baseDir</param-name>
將在FCKeditor/editor/下創建Image和Flash文件夾,用于存放上傳文件
<param-value>/editor/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>false</param-value>調試時設為true
</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>
將在FCKeditor/editor/下創建Image和Flash文件夾,用于存放上傳文件
<param-value>/editor/</param-value>
</init-param>
<init-param>
<param-name>debug</param-name>
<param-value>true</param-value>調試時設為true
</init-param>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value>修改成true
</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>
和fckconfig.js的ImageBrowserURL等對應
<url-pattern>/editor/filemanager/browser/default/connectors/jsp/connector</url-pattern>
</servlet-mapping>
<servlet-mapping>
<servlet-name>SimpleUploader</servlet-name>
這里你可以按自己應用具體配置,需要和fckconfig.js的ImageUploadUrl等對應
<url-pattern>/editor/upload.do</url-pattern>
</servlet-mapping>
<welcome-file-list>配置歡迎文件
<welcome-file>_samples/index.jsp</welcome-file>
</welcome-file-list>
<taglib>
<taglib-uri>/etag</taglib-uri>配置FCKeditor自定義標簽
<taglib-location>/web-inf/FCKeditor.tld</taglib-location>
</taglib>
</web-app>
修改 fckconfig.js中:
FCKConfig.DefaultLanguage = 'zh-cn' ; 修改默認語言為簡體中文
把FCKConfig.LinkBrowserURL等的值替換成以下內容:
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Connector=connectors/" + _FileBrowserLanguage + "/connector"
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Image&Connector=connectors/" + _FileBrowserLanguage + "/connector";
FCKConfig.FlashBrowserURL = FCKConfig.BasePath + "filemanager/browser/default/browser.html?Type=Flash&Connector=connectors/" + _FileBrowserLanguage + "/connector";
FCKConfig.LinkUploadURL = FCKConfig.BasePath + "filemanager/upload/" + _QuickUploadLanguage + "/connector?Type=File";
FCKConfig.ImageUploadURL=FCKConfig.BasePath + "upload.do?Type=Image";
FCKConfig.FlashUploadURL=FCKConfig.BasePath+ "upload.do?Type=Flash";
Connector參數的值完全可以修改,只要和web.xml中配置一致即可
3.5 有的例子說必須在FCKeditor/webroot/editor/下手工新建Image和Flash兩個文件夾,FCKeditor不會自己創建文件上傳的文件夾,否則無法上傳文件,將提示無權操作,在java應用下無需自己創建,ConnectorServlet會在你第一次執行文件瀏覽時,根據url的type參數,判斷baseDir下是否存在以type值為名字的文件夾,不存在就創建它。
3.6 FCKConfig.TabSpaces = 0 ; 改為FCKConfig.TabSpaces = 1 ; 即在編輯器域內可以使用Tab鍵。
找到: FCKConfig.FontNames = 'Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;
加上幾種我們常用的字體
FCKConfig.FontNames
= '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;Courier New;Tahoma;Times New Roman;Verdana' ;