contenteditable IE11 document.execCommand foreColor問題（在Firefox上正常工作）

Question

我正在創建一個簡單的鍵入工具（必須使用IE11）。 請注意，在一切正常的Firefox中，這不會發生。

execCommand前景色給了我不想要的結果：

我用黑色鍵入一些文本，然后說我想在其中一個黑色單詞中鍵入但顏色不同。 如果將插入符號插入單詞中，然后單擊要使用的新顏色（執行document.execCommand（'foreColor'，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();
    }
}
}

當然，這不是一個完美的解決方案，並且在輸入了一定數量的元素之后，輸入開始變得緩慢。