0

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

谢谢你的帮助

4

2 回答 2

3

您可以通过多种方式解决此问题，但一种简单的方法是document.execCommand("InsertHTML")在大多数浏览器中使用，而pasteHTML()在 IE 中使用。但是，这在 IE 11 中不起作用，因为它不支持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();
    }
}

insertNode()另一种适用于除 IE <= 8 之外的所有浏览器（您可以使用与上述相同的回退）的方法是使用从选择中获得的 Range 方法手动插入图像。这是最面向未来且符合标准的方法，所以我推荐：

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/

于 2013-07-12T09:15:19.330 回答
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();
}
于 2013-07-13T08:01:53.177 回答