如何在可编辑的iFrame文档中操作文本？

Question

我想要创造出花哨的＆＃34;文本区域＆＃34;像typeit.org一样。我非常确定他们使用iFrame将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")。