以下為本站文章分類清單

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

以下為本頁本文內容

自製 WYSIWYG RichEditor 探討(3)-contentEditable

10/8 12' icon

Photo by ckeditor.com/

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

相關文章

先前討論過的 designMode 屬性,適用於整份文件,於是,幾乎所有關於自製編輯器的文章,都是以 iframe 來製作編輯器。

而在 Firefox 3.5+ , chrome 6+,IE 6+之後,導入了 contentEditable 這個個屬性,則可以讓元件單獨進入可編輯狀態,語法相當簡單,如下

<TAG contentEditable="true"></TAG>

contentEditable 可用的值有 true/false/inherit,預設為 inherit,也就是繼承父層的可編器性,例如指定表格為可編輯,那單一的儲格格自動繼承可編輯屬性。

來看一下範例

     
     
     
     
     

上面的表格,有底色的兩個儲存格不可編輯,你可以自由的在儲存格中加入文字,刪除等動作。使用 execCommand() 指令時,仍以 document.execCommand(args) 來執行即可

document 就是 document 這個字,不是代表任何文件物件。

而 Javascript DOM 語法則為

el.contetnEditable='true'

請注意大小寫以及設定值為字串,而非布林值。

與其他編輯器比較起來,使用 contentEditable 可以輕易地在文件中設定多處可編輯區域,但是內容控制,只要一組即可,使用 iframe 來編輯時,每個 iframe 要有自己的內容控制,這也是為什麼所有網頁編輯器,都有一個類似 genereAll 的指令,把整份文件中的 iframe 全部變成可編輯區。

這對於只需要簡單編輯功用的人來說,例如只要可調文字大小、顏色等簡單功能時,就實在太方便了。

 

以下為文章回應區

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

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