/ Work

[JS tech.] CKeditor 萬事起頭一點都不難 - part 1

如果有聽過 FCKeditor 的人,那我想 CKeditor 就一定要換上來用。雖然是同一家公司出品的編輯器,但是用了這麼久的 FCKeditor,我對於他的 API 頁面少成這樣實在有點頭痛,講好聽一點有四頁(驚),講難聽一點只有一頁。自從 CKeditor 推出之後,我一看到他的 API 頁面,差點沒痛哭流涕!這才叫做 API 啊(淚)!

CKeditor 是 FCKeditor 的新作品,無論在速度或是 API 上都有很強大的進步。雖然我是在本機測試,但是幾乎瞬間啟動的編輯器畫面還是深得我心啊(大心)。同時官方也提供了完整的 source code 以供參考(做壞事),你可以在 官方的 svn 裡面找到 CKeditor 的 nightbuild 版本,如果你心臟夠大顆可以試試看。

同時在 svn 裡面也有提供 CKPackager 給你下載,你可以用 pack 檔案來打包自己想要的 CKeditor 的功能。但是,因為各種原始檔案並沒有詳細說明個別的相依特性,所以自行打包的話就必須要承擔一點風險,不然編輯器有可能會跛腳。所以,除非必要,不然還是不建議自己打包,你可以使用輕量化的 ckeditor_basic 就好(完整版的 CKeditor 檔案高達 265KBytes)。

首先,我們直接跳過官方那個 [鳥鳥的 Develop's Guide] (http://docs.fckeditor.net/CKEditor_3.x/Developers_Guide)吧(喂喂)。先從源頭看起,當你下載回來解壓縮之後,你會看到有 _source 這個資料夾,他就是所有的原始檔案,數量龐大,不建議胡亂服用(沒人叫你吃),最重要的地方是 core 資料夾,裡面是整個 CKeditor 的核心,依照 ckeditor_basic 的設定,我們由五個 js 看起。

  • ckeditor_base.js
  • event.js
  • editor_basic.js
  • env.js
  • ckeditor_basic.js

以上就可以架構一個檔案很小五臟俱全(7 KBytes)的編輯器。同時,這五個檔案也建立了 CKeditor 最基本的 Namespace/Classes 所需要的功能。

至於這些東西能做些甚麼事情?

  • event 提供:

  • 觸發(fire, fireOnce)

  • 監聽(on)

  • 監聽控制(hasListeners, removeListeners)

  • editor 提供:

  • DOM 控制(element, elementMode)

  • 編輯區方法(暫不詳述,大致上跟 FCK 差不多,但是有一些新的,也有未完成的)

對於很基本的編輯器來說,這些控制與方法其實已經能符合八成以上的需求。

接著我來說幾個很有趣的東西(雖然是屬於 editor_base,但需要額外 plugin 支援):

  • 虛擬(假)元件(需要 plugin 支援,並未包含在官方發佈的完整 ckeditor.js 中)
  • 截取快照

首先,虛擬(假)元件雖然是包含在編輯器的 editor.js 中,但是他是需要你額外把 plugin 給打包進來的功能,個人猜測他還在測試中,所以並沒有真正把他包到完整的版本裡面。他的功能是,利用一張圖片來取代真正要顯示(插入)在編輯器裡的元件。這樣的動作跟 TextCube 的編輯器插入 Flash 的動作很像。他就只是插入一張替代的圖片,然後在儲存的時候再將圖片給換回真正要插入的 code

其實這個功能我已經在 FCKeditor 實作出來了,所以我很樂見他有內建這樣的功能。但是,稍微深入一點,他這個方法要呼叫還不是那麼容易,首先,你要先準備一組符合 CKEDITOR 標準的元件給他,換句話說,你必須要用 CKEDITOR API 先建立一個元件(就是你要插入的 code),然後再利用這個方法把元件換成假的。至於說,這樣作會不會多此一舉?我個人是覺得見仁見智,你要用正規表示式去洗其實也可以啦。

至於截取快照,他是另一種"儲存"的方式,不真的儲存,而是將已經輸入好的內容放到某個變數裡面(就是丟到記憶體裡面啦),然後你可以隨時取出來用。這樣可以解決遠端連線出問題的時候資料的保存,但是缺點是,萬一客戶端這邊當機,也一樣一去不復返啊(茶)。

就暫時先到這,接下來將會介紹 htmlParser/htmlWrite 這個核心命脈 plugin(笑)。