在IE10中使用execCommand插入后如何模糊(聚焦丢失)图像? [英] How blur (focus lost) the image after insertion with execCommand in IE10?

问题描述

我有一个内容可编辑的DIV，例如:

I have a content editable DIV such as:

<div contenteditable='true' id='myRichTextBox'></div>

此外，我还有一个按钮，可将图像插入提到的DIV中.插入图像后，它将使用可调整大小的处理程序进行聚焦.
我如何失去焦点，并将焦点重新带到可编辑的DIV内容?

In addition, I have a button that inserts an image into the mentioned DIV. Once the image inserted it has focused with resizable handlers.
How I can lose it's focus and bring back the focus to the content editable DIV ?

<button type='button' onclick='insertImage()'>Insert an image</button>

JavaScript代码:

Javascript code:

function insertImage()
{
document.execCommand('insertImage',false,'myImage.png');
}

感谢您的帮助

推荐答案

您可以通过多种方式解决此问题，但是一个简单的方法就是在大多数浏览器中使用document.execCommand("InsertHTML")，而在IE中会回到pasteHTML().但是，这在IE 11中不起作用，因为它 InsertHTML 命令.

You can work round this in several ways, but a simple one would be to use document.execCommand("InsertHTML") in most browsers, falling back to pasteHTML() in IE. However, this will not work in IE 11 because it does not support document.selection or the InsertHTML command.

function insertImageWithInsertHtml(imgSrc) {
    var imgHtml = "<img src='" + imgSrc + "'>";
    var sel;
    if (document.queryCommandSupported("InsertHTML")) {
        document.execCommand("InsertHTML", false, imgHtml);
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var range = sel.createRange();
        range.pasteHTML(imgHtml);
        range.collapse(false);
        range.select();
    }
}

除了IE< = 8(您可以使用与上面相同的后备选项)之外的所有浏览器都可以使用的另一种方法是，使用从选择中获得的Range的insertNode()方法手动插入图像.这是最适合未来且符合标准的方法，也是我建议的方法:

Another way which would work in all browsers except IE <= 8 (for which you can use the same fallback as above) would be to insert the image manually using the insertNode() method of a Range obtained from the selection. This is the most future-proof and standards-compliant method so is what I'd recommend:

function insertImageWithInsertNode(imgSrc) {
    var sel;
    if (window.getSelection) {
        var sel = window.getSelection();
        if (sel.rangeCount > 0) {
            var range = sel.getRangeAt(0).cloneRange();
            range.deleteContents();
            var img = document.createElement("img");
            img.src = imgSrc;
            range.insertNode(img);

            // Place the caret immediately after the image
            range.setStartAfter(img);
            range.collapse(true);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    } else if ( (sel = document.selection) && sel.type != "Control") {
        var range = sel.createRange();
        range.pasteHTML("<img src='" + imgSrc + "'>");
        range.collapse(false);
        range.select();
    }
}

最后，这是一个实时演示，展示了所有三种技术:

Finally, here's a live demo showing all three techniques:

http://jsfiddle.net/timdown/9ScLA/3/

这篇关于在IE10中使用execCommand插入后如何模糊(聚焦丢失)图像?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！