javascript - pasteHTML 之前的 document.execCommand 不起作用

Question

我正在开发一个富文本编辑器。这是一个示例代码来说明它

http://jsfiddle.net/paulofreitas/RG3Bd/

如果我document.execCommand ('bold', false, null)之前pasteHTML插入一些文本，它不起作用。我想发送命令“粗体”，然后使用 pasteHTML 插入一些特殊文本并使该文本变为粗体。

我以粗体为例，但可以是任何 execCommand。

有什么帮助吗？

Answer 1

我认为您最好创建一个跨度或 div 并将其样式设置为粗体或任何您想要的然后插入它。浏览器的差异意味着否则它会变得非常混乱。这是我的意思的一个例子：

http://jsfiddle.net/nsfPN/

function pasteBoldHtmlAtCaret(html) {
    pasteHtmlAtCaret('<span style="font-weight: bold;">' + html + '</span>');
}

另一种方法是选择插入的 html，发送命令将其设置为粗体（如果它不是粗体），然后将光标位置设置为插入的 html 之后。然后，您需要确保在此之后键入/插入的任何文本也不是粗体（或者如果需要，请确保它是粗体）。所有这些步骤都将受到不同浏览器实现的变幻莫测。

编辑：如果您需要做的只是插入一些采用当前样式的文本，并且您不需要支持某些较旧的浏览器，那么您可以像这样使用 insertText 命令：

function pasteTextWithStyle(html) {
    if (document.queryCommandEnabled('insertText')) {
        document.execCommand('insertText', false, html);
    } else {
        // TODO: If the browser doesn't support insertText,
        // check current styles and manually apply them...
    }
}

请参阅：http: //jsfiddle.net/2Ljfj/目前我无法在 iPhone 上对其进行测试，但它至少在 webkit 中得到了一段时间的支持，因此它应该可以工作。