以下為本站文章分類清單

  1. AJAXspacer
  2. ASPspacer
  3. CSSspacer
  4. Javascriptspacer
  5. Windows 應用程式spacer
  6. 網頁設計
  7. 評論、短文、雜文spacer
  8. 版主spacer
  9. 最新回應spacer

以下為本頁本文內容

自製 WYSIWYG RichEditor 探討(1)-designMode

8/23 10' icon

Photo by ckeditor.com/

這個主題,在這段文字仍存在時,仍是進行式,內容是對於網頁編輯器(Rich Text Editor)製作的討論,隨時我會修正文中的錯誤,這並非已可套用的內容,請網友注意並包涵。

相關文章

許多開發軟體,甚至網站,都有自己的 API (Application Program Interface) 提供給開發人員自行設計可與軟體或網站相結合的應用程式。API 和程式庫不太一樣,API 是一種規範,稱為介面 (Interface),在這規範中,明訂了一些軟體或網站可以使用的語法或物件。Javascript 不算是提供 API 的語言,不過一些基於 Javascript 開發出來稱為 Framework 的套件,就有自己的 API,方面讓其他人能增強這個套件,例如 jQuery。

而網頁編輯器 (Rich Editor) 則是瀏覽器提供的 API,用於製作網頁編輯器,例如 HTMLAreaCKEditor 等。

Document 物件中有個名為 designMode 的屬性,預設值為 off,可用值還有 on,是啟動 Rich Editor API 的開關,先來試一下。

測試方法:先按 designMode='on' 的按鈕(畫面可能會閃一下),然後這個頁面中的文字,你隨便拉一段或幾字,按 Delete ,就可以刪除了。

designMode 在 FireFox 1.3 版時開始支援,至於 IE 什麼版本開始支援,我還不清楚,不過至少手上的 IE8 是支援的。

designMode 是 Document 屬性,理論上,透過繼承的原則,應該可以應用在 DIV 區塊中,使某一個區塊內可以編輯。不過,這點卻讓我們失望了。也就說 designMode 只能應用在整文件中。這個問題是否是因為這個 API 仍在開發中就不得而知。

所幸,目前乎所有瀏覽器都支援 IFRMAE 設計,這就讓 designMode 屬性有點起死回生的味道,也就是在內嵌的視窗中編輯,自然就是整份文件。實際操作設計時,最後把 IFRAME 的內容取回自己的表單中,再送出,基本的網頁編輯器也就完成了,例如(下面視窗的內容,你可以刪除或打字,但如果你按了上面 designMode='on' 時,麻煩按個 F5 重新載入頁面):

<iframe width="100%" height="80" id="dm" name="dm" style="border:#000 1px solid;">

<script>
	var editor=window.frames['dm'].document;
	editor.open();
	editor.write('這個主題,在這段文字...');
	editor.close();
	editor.designMode='on';
</script>

上列原始碼第 4 行,讀取 IFRAME 元件,其中,IFRAME 使用的是 name 來指定名稱,而非使用 ID 來識別(不過 ID 也加上去,下面會提到)。在 IE 中,可以直接使用 frameName.document ,不過上述寫法 IE 也支援,就建議使用上述寫法。

萬一,這種取得 IFRAME 元件方式失效時,試試以下作法:

function getIFrameDocument(aID){
	if (document.getElementById(aID).contentDocument){
		return document.getElementById(aID).contentDocument;
	}else{
		return document.frames[aID].document;
	}

aID 就是以 ID 指定的 IFRAME。

當然,這段初值化程式,是沒法放在 HEAD 區段中,最好是在 onload 才執行,接下來問題,下一篇再討論,要去賺奶粉錢了。

以下為文章回應區

同意轉載,不過麻煩看一下轉載需知

給個回應
姓名:
佈落格網址:
  如果您是要發問問題, 最好有個問題測試的網址, 這樣比較容易找到您問題所在, 謝謝
內容: