SpringSide 實戰（七）：整合 FCKeditor 打造富文本編輯體驗

功能設計：圖文並茂的社區發文

假設開發以圖文為中心的網絡社區，文章需標題、分類、正文，並從上傳圖片中選一張為主題圖（列表顯示縮略圖）。數據表 topics 關鍵字段：

• pictures：所有圖片 URL，| 分隔
• mainpicture：主題圖 URL

保存所有圖片 URL 便於用戶修改文章時重新選擇主題圖。

FCKeditor 簡介

開源、跨瀏覽器、功能強大。下載 2.4 版，解壓得 editor（核心）、_samples、_testcases。客戶端 JS 控制 UI，僅上傳文件需服務端交互。

方案一：純 JavaScript 整合（快速預覽）

<script src="fckeditor/fckeditor.js"></script>
<script>
window.onload = function() {
  var oFCKeditor = new FCKeditor('myTextArea');
  oFCKeditor.BasePath = 'fckeditor/';
  oFCKeditor.Width = '800';
  oFCKeditor.Height = '300';
  oFCKeditor.ToolbarSet = 'Basic';
  oFCKeditor.Config['SkinPath'] = 'skins/office2003/';
  oFCKeditor.ReplaceTextarea();
};
</script>

屬性：InstanceName, Width/Height, ToolbarSet, Value, BasePath, CheckBrowser, DisplayErrors, Config[key]=value（皮膚、語言等）。

方案二：服務端整合（支援文件上傳）

下載 FCKeditor.java 2.3，提取 web/WEB-INF/lib 兩個 JAR 至專案 WEB-INF/lib，合併 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>/UploadFiles/</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>/UploadFiles/</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>DeniedExtensionsFile</param-name><param-value>php|jsp|asp|exe|...</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>

JSP 使用標簽庫：

<%@ taglib uri="https://fckeditor.net/tags-fckeditor" prefix="FCK" %>
<FCK:editor id="EditorDefault" basePath="/xkland/fckeditor/"
  imageBrowserURL=".../browser.html?Type=Image&Connector=..."
  imageUploadURL=".../simpleuploader?Type=Image" ... >
  初始內容
</FCK:editor>

注意：所有 URL 必須用絕對路徑。

進階控制

自定義工具欄

修改 fckconfig.js：

FCKConfig.ToolbarSets['Usable'] = [
  ['Source','Preview'], ['Undo','Redo','-','SelectAll','Cut','Copy','Paste','-','RemoveFormat','-','Find','Replace'],
  ['Link','Unlink','Anchor'], ['FitWindow','-','About'], '/',
  ['Bold','Italic','Underline','StrikeThrough','-','Subscript','Superscript'],
  ['OrderedList','UnorderedList','-','Outdent','Indent'],
  ['JustifyLeft','JustifyCenter','JustifyRight','JustifyFull'],
  ['Image','Flash','Table','Rule','Smiley'], '/',
  ['Style','FontFormat','FontName','FontSize'], ['TextColor','BGColor']
];

添加中文字體

FCKConfig.FontNames = '宋體;黑體;隸書;楷體_GB2312;Arial;Comic Sans MS;...';

套用皮膚與工具欄

<FCK:editor ... skinPath="/xkland/fckeditor/editor/skins/office2003/" toolbarSet="Usable" ...>

獲取編輯器插入的圖片

錯誤做法：修改 FCKeditor 內部 JS 通知列表框（侵入性強、刪圖無法追蹤）。
正確做法：編輯器失焦時遍歷 DOM：

function FCKeditor_OnComplete(editorInstance) {
  editorInstance.Events.AttachEvent('OnBlur', onEditorBlur);
}
function onEditorBlur() {
  var oSelect = $('#img_select');
  oSelect.empty();
  var oEditor = FCKeditorAPI.GetInstance('EditorDefault');
  var imgs = oEditor.EditorDocument.body.getElementsByTagName('img');
  for (var i=0; i<imgs.length; i++) {
    var opt = document.createElement('option');
    opt.text = imgs[i].src;
    oSelect.add(opt);
  }
}

此法非侵入、實時同步、支援刪除檢測。