contenteditable IE11 document.execCommand foreColor 问题（在 Firefox 上正常工作）答案

【问题标题】：contenteditable IE11 document.execCommand foreColor issue (works properly on Firefox)contenteditable IE11 document.execCommand foreColor 问题（在 Firefox 上正常工作）
【发布时间】：2018-07-22 17:29:14
【问题描述】：

我正在创建一个简单的打字工具（我必须使用 IE11）。请注意，这不会在 Firefox 中发生，它一切正常。

execCommand 前景色给了我一个不想要的结果：

我用黑色输入了一些文本，然后假设我想在其中一个黑色单词中输入一个不同的颜色。如果我将插入符号放在单词中并单击我要使用的新颜色（执行 document.execCommand('foreColor', false, currentForeColor);），整个单词将成为新选择的颜色。如果我先选择颜色，然后将插入符号放在单词的中间，颜色将保持黑色（这也发生在 Firefox 上）。

有一些截图可以提供一个想法。

键入一些黑色文本：

在单词中间单击并选择一种颜色：

实际想要的结果：

我想要实现的是，一旦您选择了一种颜色，它就会在您放置插入符号的任何位置使用该颜色键入，而不会影响现在的单词。

【问题讨论】：

标签： javascript contenteditable execcommand

【解决方案1】：

解决这个问题的方法是在用户每次输入字符时设置颜色。

event.preventDefault();
var tmpHtml = "<font color='" + currentForeColor + "'>" + event.key + "</font>";
pasteHtmlAtCaret(tmpHtml);
console.log(tmpHtml);

还有我用来粘贴 html 的函数（在这里找到：pastHtmlAtCaret）

function pasteHtmlAtCaret(html, selectPastedContent) {
var sel, range;
if (window.getSelection) {
    // IE9 and non-IE
    sel = window.getSelection();
    if (sel.getRangeAt && sel.rangeCount) {
        range = sel.getRangeAt(0);
        range.deleteContents();

        // Range.createContextualFragment() would be useful here but is
        // only relatively recently standardized and is not supported in
        // some browsers (IE9, for one)
        var el = document.createElement("div");
        el.innerHTML = html;
        var frag = document.createDocumentFragment(), node, lastNode;
        while ( (node = el.firstChild) ) {
            lastNode = frag.appendChild(node);
        }
        var firstNode = frag.firstChild;
        range.insertNode(frag);

        // Preserve the selection
        if (lastNode) {
            range = range.cloneRange();
            range.setStartAfter(lastNode);
            if (selectPastedContent) {
                range.setStartBefore(firstNode);
            } else {
                range.collapse(true);
            }
            sel.removeAllRanges();
            sel.addRange(range);
        }
    }
} else if ( (sel = document.selection) && sel.type != "Control") {
    // IE < 9
    var originalRange = sel.createRange();
    originalRange.collapse(true);
    sel.createRange().pasteHTML(html);
    if (selectPastedContent) {
        range = sel.createRange();
        range.setEndPoint("StartToStart", originalRange);
        range.select();
    }
}
}

当然这不是一个完美的解决方案，在输入一定数量的元素后，打字开始变得迟钝。

【讨论】：