如何处理可编辑的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")。