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

How to manipulate text in editable iFrame documents?

本文关键字：文档 iFrame 文本 编辑 何操作 操作      更新时间：2023-09-26

我想像typeit.org一样创建奇特的"文本区域"。我很确定他们使用iFrame时iFrame doument的contentEditable值设置为true，但符号按钮是如何工作的？使用此技术时，如何用符号替换iFrame内的当前选择，或者如果未选择任何内容，如何将符号插入光标的左侧？http://currencies.typeit.org/

将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")。

相关文章：