相關文章
先前討論過的 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 全部變成可編輯區。
這對於只需要簡單編輯功用的人來說,例如只要可調文字大小、顏色等簡單功能時,就實在太方便了。
同意轉載,不過麻煩看一下轉載需知