以下為本站文章分類清單

  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 全部變成可編輯區。

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

 

以下為文章回應區

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

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