WYSIWYG編輯器在div上使用contenteditable有多可靠？

我相信這個標題不言而喻，但也許，我應該詳細詢問。我正在構建一個所見即所得的編輯器，而且我真的處於開始階段。所以，我意識到也許知道利弊會啓發我。基本上，我的問題是，因爲我想要一個在所有主流瀏覽器中至少可以工作90％的編輯器，我可以如何進一步使用div中的contenteditable，以及與designMode和iframe相比，使用contenteditable有哪些缺點和優點？另外，在研究中我發現了this editor。我相信它沒有使用任何這些屬性，它正在移動textarea的位置。這是一個更好的方法嗎？那麼，我知道有很多因素會影響最後一個問題的答案，但正如我所提到的，我在編輯器中查找的最重要的事情是它可以被90％的用戶使用。注意：我不想使用任何第三方庫。WYSIWYG編輯器在div上使用contenteditable有多可靠？

來源

2011-04-16 Shaokan

您提到的編輯器不是一個所見即所得的編輯器，只是一個純文本編輯器，高亮顯示 – user123444555621 2011-04-16 13:11:50

對於大多數用途，我的首選仍然是在大多數瀏覽器上使用designMode的iframe，並且在IE中使用可用的<body>元素，這使得它更易於使用。原因：

具有可編輯內容的iframe有效沙箱，並可以丟棄編輯器到任何網頁與信心，頁面的CSS和DOM事件不會影響到編輯內容
designMode更可靠在Firefox中。我見過幾個bug與contenteditable不與designMode存在，這可能是因爲CONTENTEDITABLE加入到Firefox相對較近，而將designMode自2003年以來各地

至於ACE存在，它的textarea的做法是聰明並有很多優點，但我懷疑這種方法僅限於等寬字體。另外，CodeMirror 2 uses a related approach但同樣限於等寬字體。

來源

2011-04-16 11:09:15

謝謝蒂姆。堅持使用contentEditable的唯一事情是我不喜歡使用iframe。可能是因爲之前幾年我在這個標籤上做過的閱讀。或者可能是一個誤會。我相信使用div比iframe更有效。這只是一個信念壽，我沒有做出研究:)至於FF，我知道contenteditable在firefox 2中不被支持，但在做了一些研究後，我發現ff2甚至沒有1％的份額主要瀏覽器。那麼，您是否認爲使用contentEditable可以使用一個好的所見即所得的編輯器（至少90％的用戶是有針對性的）？ – Shaokan 2011-04-16 12:03:22

@ Shaokan：是的，我認爲contenteditable是可以使用的。儘管iframe沒有任何失效，並且至少有兩個主要的所見即所得編輯器（TinyMCE和CKEditor）使用它們。 – 2011-04-19 10:30:51

再次感謝蒂姆:) – Shaokan 2011-04-19 10:34:48

的designMode和contentEditable的屬性，以及推動富文本編輯器中的API，在所有主要瀏覽器，包括Firefox，歌劇，Safari瀏覽器，谷歌Chrome，當然還有Internet Explorer是落實。

http://blog.whatwg.org/the-road-to-html-5-contenteditable

馬克芬克爾寫了一個漂亮的high-level summary of designMode，後來又增加了a post about contentEditable。

來源

2011-04-16 09:32:58 Magnar

感謝兄弟，我檢查了鏈接，很好的tut。 – Shaokan 2011-04-16 11:44:57

contentEditable不能在IE與彩車工作：

<p> 
    <img style="float:left" src="foo"> 
    <p contentEditable="true">very long text here ... 
    ... this text won't flow round the image</p> 
</p>

這是因爲contentEditable觸發臭名昭著hasLayout。除此之外，一切工作都很好。

來源

2011-04-16 13:12:56 user123444555621

嗯我不知道，非常感謝！喲預先警告我可能出現問題:) – Shaokan 2011-04-16 13:17:05

WYSIWYG編輯器在div上使用contenteditable有多可靠？

回答

相關問題