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

Question

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

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

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

有几张截图给大家一个思路。

键入一些黑色文本：

点击单词中间select颜色：

实际想要的结果：

我想要实现的是，一旦您选择了一种颜色，无论您将插入符号放在何处，它都会以该颜色打字，而不会影响当前的单词。

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

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

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

contenteditable IE11 document.execCommand foreColor issue (works properly on Firefox)

javascript

contenteditable

execcommand