代码之家 › 专栏 › 技术社区 › devamat

内容可编辑IE11文档。execCommand foreColor问题(在Firefox上正常工作)

execcommand contenteditable javascript

0

devamat · 技术社区 · 7 年前

我正在创建一个简单的键入工具(我必须使用IE11)。请注意,这在Firefox中不会发生,因为在Firefox中,一切都很好。

execCommand forecolor给了我一个不想要的结果:

我用黑色键入一些文本,然后假设我想在其中一个黑色单词内键入不同颜色的文本。如果我在word中放置插入符号并单击要使用的新颜色(执行document.execCommand('foreColor',false,currentForeColor);)整个单词将成为新选择的颜色。如果我首先选择颜色,然后将插入符号放在单词的中间,颜色将保持黑色(Firefox上也会出现这种情况)。

这里有一些截图可以给出一个想法。

键入一些黑色文本:

单击单词中间并选择颜色:

实际预期结果:

我想实现的是,一旦你选择了一种颜色,无论你在哪里放置插入符号,它都会用这种颜色键入,而不会影响当前的文字。

1 回复 | 直到 7 年前

1

0

devamat 7 年前

解决此问题的方法是,每次用户键入字符时设置颜色。

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

当然,这并不是一个完美的解决方案,在输入了一定数量的元素后,输入开始变慢。