/ Work

[JS tech.] Ckeditor 令人詫異的 basic 模式 part 2

接續 上一篇 所提到的基本與完整模式,後來我在測試其他的程式碼的時後發現,所謂的基本(basic)模式,的確是很簡單的五個 JavaScript 檔案就可以做到,但是相對的,犧牲掉的部分卻比我想像中的還要多很多。而最令我震驚的部分是,在基本模式中,呼叫編輯器的 CKEDITOR 的其中一支 prototype: instances 會全數失效,所帶來的後果就是,編輯器本身會完全無法控制(所以才叫做 basic 嗎)?

所以,基本上想要客製化這個編輯器,在官方還沒有釋出(或者不打算釋出)各種 plugins 之間的相依性的話,還是得使用完整的版本(就是檔案大小高達 265 KBytes 的版本)。雖然檔案有點過大,但是以現在的網路速度來說,應該還不至於到能感覺到嚴重延遲的地步。

接著,我先來提一下 htmlParser 與 htmlWriter。這兩個函式其實主要是用來產生與寫入標準的 HTML 標記語言,不同的是,htmlParser 的作用其實是用於監聽貼入的內容,而 htmlWriter 則是單純的寫入。我們先來看 htmlParser 的方法有哪些:

  • onCDATA, function( cdata )

    依序取出被貼入的 <sript>...</script> 內的資料。
  • onComment, function( comment )

    依序取出被貼入的 <!-- ... --> 內的資料。
  • onTagClose, function( tagName )

    依序取出被貼入的 </tag> 的標籤名稱。
  • onTagOpen, function( tagName, attributes, isSelfclosing )

    依序取出被貼入的 <tag> 的標籤名稱、屬性值與是否為自我結尾標籤(self-closing tag)。
  • onText

    依序取出被貼入的 <tag> ... </tag> 內的資料。
  • parse

    貼入 HTML 資料。

扣除第六項之外,其他的方法都是監聽的方法,總共會針對貼入的內容的五種標籤做監聽動作。至於你問我為什麼要監聽這些動作,其實是為了能夠在寫入編輯器的內文或是取出內文時能做一些調整,當然啦,如果你是很單純的使用者打什麼你就存什麼的話,就不需要這麼費功夫了。

接著,htmlParser 還有幾個特別的類別:

  • CKEDITOR.htmlParser.cdata
  • CKEDITOR.htmlParser.comment
  • CKEDITOR.htmlParser.element
  • CKEDITOR.htmlParser.fragment
  • CKEDITOR.htmlParser.text

以上的類別全部都是為了給 htmlWriter 用的,直接呼叫會返回 undefined,至於為什麼他要寫在 API 裡面我也不懂。而且 htmlWriter 幾乎包含了上述所有功能(除了 fragment 之外),這一塊我想官方還要做詳細一點的說明才行,不然無法直接呼叫使用是有點奇怪。

至於 htmlWriter(有雷) 又在做甚麼:

  • openTag, function( tagName, attribute )

    開啟一個 tag,形同 <tag 的意思。但是那個 attribute 是個雷,因為這個函式完全沒有屬性設定的相關動作,所以,我在想這個地方應該是官方有所保留要做甚麼事情用的吧。
  • openTagClose, function( tagName, isSelfclosing )

    關閉一個開啟的 tag,形同 <tag.... > 的意思。請不要跟 closeTag 搞混,這裡還有是否為自我結尾標籤(self-closing tag)的判定,他是用於關閉一個開啟中的標籤,與成對標籤的關閉不同。
  • attribute, function( attName, attValue )

    在標籤中設定屬性,這裡的屬性設定才是有效的,而這個設定必須要在 openTagClose 之前完成。
  • closeTag, function( tagName )

    關閉成對標籤,形同 <tag.... > ... </tag> 的意思。
  • text, function( text )

    加入內文。
  • comment, function( comment )

    加入注釋,形同 <!-- ... --> 的意思。
  • lineBreak

    在原始碼加入斷行,形同 \n 的意思。
  • indentation

    在原始碼加入縮排,形同 \t 的意思。
  • setRules, function( tagName, rules )

    在標籤中加入標籤規則,這裡的標籤規則總共有五項:
  • indent,插入縮排(\t)。
  • breakBeforeOpen,標籤開啟前斷行(\n)。
  • breakAfterOpen,標籤開啟後斷行(\n)。
  • breakBeforeClose,標籤關閉前斷行(\n)。
  • breakAfterClose,標籤關閉後斷行(\n)。

如果需要對某特定標籤設定標籤規則,在標籤開啟(openTag)之前需要先執行標籤規則(setRules)。

截至目前為止,這些都還是屬於 Core 的部分,還有很多可以寫,但是今天看太多 htmlWrite 的 plugin 部份,雷太多被炸得滿頭包(是的,htmlWrite 有分 core 跟 plugin 兩種版本,但是作用相同),所以下次就來講講其他的部分,大概是 editor 與 events 的部分吧。