如何處理可編輯的iFrame文檔中的文本？

Question

我想創造像typeit.org那樣的花哨的「文本區域」。我很確定他們使用iFrames，並將iFrame doument的contentEditable值設置爲true，但符號按鈕可能如何工作？使用這種技術時，如何用符號替換iFrame中的當前選擇內容，或者如果沒有選擇任何內容，請將符號插入到光標左側？ http://currencies.typeit.org/

Answer 1

當使用iFrame作爲富文本編輯器時，可以告訴iFrame啓用設計模式並執行命令。

爲了使設計模式（允許用戶編輯的iframe），您可以使用此代碼片段：

document.getElementById("myiframe").document.designMode="on"; 

然後執行，當用戶點擊一個按鈕命令，你只需使用此代碼段：

var textEditor = document.getElementById("myiframe"); 
textEditor.document.execCommand(x,"",y); 
textEditor.focus(); 

凡x是命令和y是值。有關可用命令的更多信息，請參閱MSDN。我相信OverWrite提供了您在TypeIt中看到的功能;但我可能是錯的，我會研究它並更新我的答案。

編輯：由於@TimDown建議：IE不支持insertHTML，所以要在IE中做等效，請使用textEditor.document.selection.createRange().pasteHTML("some HTML")。