Question

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

我无法理解的是当您点击触发此

的粗体按钮时

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

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

Answer 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 exexCommand以使所选文本变为粗体。

您可以在http://help.dottoro.com/larpvnhw.php

查看所有execCommands的列表

Answer 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();
}

Answer 3

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

Answer 4

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

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

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

iframe如何？ contentWindow。文件。 execCommand工作？

4 个答案: