[JS tech.] Ckeditor GOGOGO~~~ 歐雷~歐雷~歐雷~ part 3

這個 CKeditor 有些地方實在是超乎我的想像，他做到了一些並不是編輯器迫切需要的功能，舉例來說，他可以控制 DOM 元件。也許你會覺得，我在編輯器裡面可以控制 DOM 元件並不是什麼壞事，偏偏，他控制的是編輯器以外的 DOM 元件。

當我在測試 Event 的時候，發現這個東西並不只有一種，換句話說，他的 Event 控制分成兩組，一組是自訂的監聽與觸發（類似 ActionScript 那樣），另一組是針對 DOM 元件的特定 events 作觸發（諸如 onClick 等）。這兩種 Event 控制分屬不同的類，自定監聽與觸發是單獨屬於 CKEDITOR.event，而針對 DOM 元件的部分則屬於 CKEDITOR.dom.element（等同於 CKEDITOR.document）。

這裡先講自定監聽與觸發的部分，針對 DOM 的因為實在不是屬於編輯器的範圍，所以容後再述。關於自定 Event 的部分其實方法都很簡單，大概有以下幾個項目：

CKEDITOR.event.implementOn

靜態方法，宣告一個 Object 元件，將 Object 元件的資料傳入所呼叫的 Event 中。
fire

觸發 Event。
fireOnce

觸發 Event，但是觸發完成之後會釋放所有的監聽。
hasListeners

檢查是否包含監聽函式。
on

設定監聽函式。
removeListeners

移除監聽函式。

另外還有一個類別，叫做 eventInfo，他是用來取得監聽所傳入的一些數值，而且還包含了兩個方法：

data

監聽函式傳入的任何資料。
editor

監聽函式傳入的編輯器。
listenerData

監聽函式傳入的資料（跟 data 不同，容後說明）。
name

監聽函式的名稱。
sender

監聽自身元件（Object）。

我們要建立一個自定的監聽，其實方法很簡單：

	var myObject = { message : 'Example' };
	CKEDITOR.event.implementOn( myObject );
	myObject.on( 'someEvent', function(event) {
	  alert(event.message);
	});
	myObject.fire( 'someEvent' );


	var myeditor = CKEDITOR.replace( 'editor1' );
	var myObject = { message : 'Example' };
	CKEDITOR.event.implementOn( myObject );
	myObject.on( 'someEvent',
	  function(event) {
	    alert(event.message);
	    alert(event.listenerData.listener);
	    alert(event.editor.name);
	    alert(event.name);
	    alert(event.data.all);
	    alert(event.priority);
	  },
	  { message: 'Example2' },
	  { listener: 'Example3' },
	  100
	);
	myObject.fire( 'someEvent', { all: 'Example4' }, myeditor);

監聽的名稱。
監聽的函式。
監聽輸入的值（是個 Scope），會蓋掉 CKEDITOR.event.implementOn 宣告所建立的 Object。
監聽建立時附帶傳入的資料。* 監聽優先值。

而 fire 則可傳入 data 與 editor 兩項數值，這樣可以分清楚 listenerData 與 data 的不同處嗎（其實我覺得有點畫蛇添足，但是也或許有甚麼地方會需要用到這樣的特性吧）。另外 event 的兩個方法 cancel() 與 stop() 個人是認為跟 fireOnce 有異曲同工之妙。官方的舉例如下：

	/* cancel() 範例 */
	someObject.on( 'someEvent', function( event )
	{
	    event.cancel();
	});
	someObject.on( 'someEvent', function( event )
	{
	    // This one will not be called.
	});
	alert( someObject.fire( 'someEvent' ) );  // "true"
	/* stop() 範例 */
	someObject.on( 'someEvent', function( event )
	{
	    event.stop();
	});
	someObject.on( 'someEvent', function( event )
	{
	    // This one will not be called.
	});
	alert( someObject.fire( 'someEvent' ) );  // "false"

最後，CKEDITOR 的 DOM，說穿了根本是一個超級大地雷！他的工作就是用來取代 jQuery 爾等的 DOM 控制器，換句話說，他自己寫了一套像是 jQuery 這樣的 DOM 控制器，來給他的編輯器使用。偏偏，他的 API 並沒有提到如何去控制＂編輯器內部＂的 DOM 元件，所以，個人認為，DOM 那一塊根本是雞肋（或者說，我們都被 jQuery 寵壞了）。

到現在為止，你發現了嗎？CKEDITOR 到目前為止都只是在作 jQuery 可以做的工作而已啊啊啊啊！

下一回我們來講地雷等級更高的 UI 跟 Dialog 的部分（這兩項才是編輯器該做的事情）。

You might also like...