在IE10中使用execCommand插入后图像如何模糊(焦点丢失)?

时间:2013-07-12 06:47:17

标签: javascript jquery internet-explorer-10 contenteditable

我有一个可编辑的内容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');
}

感谢您的帮助

2 个答案:

答案 0 :(得分:3)

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

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/

答案 1 :(得分:0)

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

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