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

Question

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

execCommand forecolor给了我一个不受欢迎的结果：

我用黑色键入一些文字，然后让我说我想在其中一个黑色字里面输入但是用不同的颜色。如果我将插入符号放在单词中并单击我想要使用的新颜色（执行document.execCommand（＆＃39; foreColor＆＃39;，false，currentForeColor）;）整个单词将成为新选择的颜色。如果我首先选择颜色，然后将插入符号放在单词的中间，颜色将保持黑色（这也发生在Firefox上）。

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

输入一些黑色文字：

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

实际需要的结果：

我想要达到的目的是，一旦你选择了一种颜色，它就会在你放置插入符号时用这种颜色键入，而不会影响当前的单词。

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

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