Question

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

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

另外，我有一个按钮，可以将图像插入到上述DIV中。一旦插入图像，它就会聚焦可调整大小的处理程序我如何能够失去它的焦点，并将重点转移到可编辑的内容DIV？

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

Javascript代码：

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

感谢您的帮助

Answer 1

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

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＆lt; = 8（你可以使用与上面相同的后备）之外的所有浏览器中工作的另一种方法是使用从中获取的范围的insertNode()方法手动插入图像选择。这是最具前瞻性和标准的方法，所以我建议这样做：

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

最后，这是一个展示所有三种技术的现场演示：

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

Answer 2

我使用以下解决方案并且工作了！

function insertImage(imgSrc)
{
    var ua = navigator.userAgent.toLowerCase();
    var tr;
    if (ua.indexOf("msie") > 0)
        tr = document.selection.createRange();
    document.execCommand("insertImage", false, imgSrc);
    if(ua.indexOf("firefox") > 0)
        document.execCommand("enableObjectResizing", false, false);
    if (ua.indexOf("msie") > 0)
    {
        tr.collapse(false);
        tr.select();
    }
    this.textbox.focus();
}

在IE10中使用execCommand插入后图像如何模糊（焦点丢失）？

2 个答案: