iframe 怎么做。内容窗口。文档。 execCommand 工作？答案

【问题标题】：How does iframe . contentWindow . document . execCommand work?iframe 怎么做。内容窗口。文档。 execCommand 工作？
【发布时间】：2011-04-12 21:50:30
【问题描述】：

我试图找出这个文本编辑器是如何工作的，我一直在扫描脚本，但似乎无法理解它。

first this is the link for the demo

我无法理解的是，当您单击触发此操作的粗体按钮时

 $('.bold', tb).click(function(){ formatText(iframe, 'bold');return false; });

然后它被发送到 formatText 函数，这就是我迷路的地方，因为他们没有提到在 textarea 中的文本中添加<strong></strong> 标签，我真的很想知道它是如何工作的，谢谢。

【问题讨论】：

标签： jquery html plugins

【解决方案1】：

function formatText(iframe, command, option) {
    iframe.contentWindow.focus();
    try{
        iframe.contentWindow.document.execCommand(command, false, option);
    }catch(e){console.log(e)}
    iframe.contentWindow.focus();

formatText 不是默认的 jQuery 函数。我从编辑器的js源中获取了以上内容。它所做的第一件事是关注文本所在的 iframe 区域。您实际上不是在 textarea 字段中输入，而是在 iframe contentEditable div <div contentEditable="true"></div> 中输入，因为 textarea 不支持富文本编辑。然后该函数发出 contentEditable exeCommand 以使所选文本变为粗体。

您可以在http://help.dottoro.com/larpvnhw.php查看所有 execCommands 的列表

【讨论】：

谢谢你的回答，我可以把标签<pre></pre>放在文本之间谢谢
这应该作为另一个问题发布。它与您上面的问题无关。

【解决方案2】：

它使用document.execCommand，这是一个将页面转换为“可编辑”模式的工具。仔细阅读描述和Command Identifiers。

它起源于 IE，但已被大多数现代浏览器采用。

这是使用它的函数。

function formatText(iframe, command, option) {
    iframe.contentWindow.focus();
    try{
        iframe.contentWindow.document.execCommand(command, false, option); //Right here
    }catch(e){console.log(e)}
    iframe.contentWindow.focus();
}

【讨论】：

谢谢你的回答，我可以把标签
放在文本之间谢谢

【解决方案3】：

那个文本编辑器不使用<textarea>s，它使用<iframe>s。

【讨论】：

【解决方案4】：

一些浏览器为所见即所得的编辑实现了一个特殊的 API。首先，它需要在文档对象上设置 designMode = "On"。之后，您可以使用执行格式化的预定义命令，例如

document.execCommand('bold', false, null);

您可以在 Firefox 使用的 Midas specification 中找到一些信息。 IE 有非常相似的 API，甚至更多 pre-defined commands。

【讨论】：