環境準備與目錄結構
- 核心套件:
FCKeditor_2.4.2.zip(編輯器主程式)、FCKeditor.Java_2.3.zip(標籤庫+上傳Servlet JAR)
- 專案結構:
WebRoot/FCKeditor/放置editor/、fckconfig.js、fckeditor.js、fckstyles.xml、fcktemplates.xml
WEB-INF/lib/加入fckeditor.jar、slf4j-api.jar
WEB-INF/放入FCKeditor.tld標籤庫描述檔
WebRoot/UserFiles/{Image,Flash,File,Media}/對應四類上傳目錄
核心配置fckconfig.js關鍵項
// 語言與外觀
FCKConfig.DefaultLanguage = 'zh-tw'; // 繁體中文
FCKConfig.SkinPath = FCKConfig.BasePath + 'skins/office2003/';
// 檔案瀏覽與上傳端點(指向Java Connector Servlet)
FCKConfig.LinkBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Connector=connectors/jsp/connector';
FCKConfig.ImageBrowserURL = FCKConfig.BasePath + 'filemanager/browser/default/browser.html?Type=Image&Connector=connectors/jsp/connector';
FCKConfig.ImageUploadURL = FCKConfig.BasePath + 'filemanager/upload/simpleuploader?Type=Image';
// 同理 Flash/Link/File
web.xml Servlet註冊重點
<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>
</servlet>
<servlet>
<servlet-name>SimpleUploader</servlet-name>
<servlet-class>com.fredck.FCKeditor.uploader.SimpleUploaderServlet</servlet-class>
<init-param>
<param-name>enabled</param-name>
<param-value>true</param-value> <!-- 必須啟用 -->
</init-param>
</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>
體積優化:刪除無用資源
editor/filemanager/browser/default/connectors/下非jsp目錄全刪
editor/filemanager/upload/全刪(Java用Servlet上傳)
editor/lang/僅保留zh-tw.js、en.js、fcklanguagemanager.js
editor/skins/僅保留使用的皮膚(如office2003/、silver/)
前台安全加固(防XSS與濫用)
- 工具列最小化:前台頁面僅啟用
Basic工具列,移除Link、Image、Flash等上傳/連結功能
- 右鍵選單精簡:
FCKConfig.ContextMenu移除'Link','Image','Flash','ImageButton'
- 字體擴充:
FCKConfig.FontNames補充'微軟正黑體','標楷體','新細明體'等中文字體
- 檔名編碼:上傳檔名避免中文,建議伺服器端重命名為UUID
JSP頁面引用範例
<%@ taglib uri="https://java.fckeditor.net" prefix="FCK" %>
<FCK:editor id="content" basePath="/FCKeditor/" height="400" toolbarSet="Basic" />
// 後端接收
String content = request.getParameter("content");