[英]contenteditable IE11 document.execCommand foreColor issue (works properly on Firefox)
I'm creating a simple typing tool (I have to use IE11). 我正在创建一个简单的键入工具(必须使用IE11)。 Note that this does not happen in Firefox, where everything works just fine. 请注意,在一切正常的Firefox中,这不会发生。
The execCommand forecolor is giving me a undesired result: execCommand前景色给了我不想要的结果:
I type some text with black, then let's say I want to type inside one of the black words but with a different color. 我用黑色键入一些文本,然后说我想在其中一个黑色单词中键入但颜色不同。 If I place the caret in the word and click the new color I want to use (which executes document.execCommand('foreColor', false, currentForeColor);) the whole word will become of the newly selected color. 如果将插入符号插入单词中,然后单击要使用的新颜色(执行document.execCommand('foreColor',false,currentForeColor);),则整个单词将变为新选择的颜色。 If I first select the color and then place the caret in the middle of the word, the color will remain black (this also happens on Firefox). 如果我先选择颜色,然后将插入号放在单词的中间,则颜色将保持黑色(在Firefox上也是如此)。
There are a few screenshot to give an idea. 有一些截图可以给您一个想法。
Type some black text: 输入一些黑色文字:
Click in the middle of the word and select a color: 单击单词的中间并选择一种颜色:
The actual desired result: 实际的预期结果:
What I would like to achieve is that once you chose a color it will type with that color wherever you place the caret and without affecting the present words. 我想要实现的是,一旦选择了一种颜色,它将在您插入插入符号的任何位置以该颜色键入文本,而不会影响当前的单词。
The solution to this issue was to set the color each time the user types in a character. 解决此问题的方法是在用户每次输入字符时设置颜色。
event.preventDefault();
var tmpHtml = "<font color='" + currentForeColor + "'>" + event.key + "</font>";
pasteHtmlAtCaret(tmpHtml);
console.log(tmpHtml);
And the function I use to paste html (found here: pastHtmlAtCaret ) 和我用来粘贴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();
}
}
}
Of course it's not a perfect solution, and after a certain number of elements the typing starts to get laggy. 当然,这不是一个完美的解决方案,并且在输入了一定数量的元素之后,输入开始变得缓慢。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.