javascript - getSelection 不适用于 Chrome 中的图像

Question

在我的网站中，我使用的是使用 iframe 的 WYSIWYG 编辑器。

当我双击选择文本以添加链接时，在 Chrome、Safari 和 Firefox 中，所选文本是正确的，并且添加了链接。

但是，当我单击图像时，选择仅在 Firefox 中完成。 Chrome 和 Safari 的选择是空的，为了选择图像并在其上添加链接，我必须将鼠标拖到它上面，就像手动选择一样。

我的代码是:

 var sel = parent.document.getElementById('myframe').contentWindow.document.getSelection();

 if (sel.rangeCount > 0) {
    var range = sel.getRangeAt (0);
    var docFragment = range.cloneContents ();
    var tmpDiv = document.createElement ("div");
    tmpDiv.appendChild (docFragment);
    selHTML = tmpDiv.innerHTML;
 }

 if (selHTML != '') {
     parent.document.getElementById('myframe').contentWindow.document.execCommand(id,false,value);
 }

有什么办法可以解决这个问题吗？

提前致谢。

我根据@Tim 的建议将代码更改为该代码:

 var iframeWin = parent.document.getElementById('myframe').contentWindow;
 var iframeDoc = iframeWin.document;
 var sel = iframeWin.getSelection();
 var range = iframeDoc.createRange();
 var referenceNode = document.getElementsByTagName("img").item(0);
 range.selectNode(referenceNode);

 sel.removeAllRanges();
 sel.addRange(range);
parent.document.getElementById('myframe').contentWindow.document.execCommand(id,false,value);

但还是不行。还有更多建议吗？

Answer 1

您可以使用 dblclick 事件手动执行此操作，但要注意不要破坏您在非 WebKit 浏览器中获得的常规图像大小调整句柄。

现场演示:http://jsfiddle.net/x49hv/3/

代码:

var iframeWin = parent.document.getElementById('myframe').contentWindow;
var iframeDoc = iframeWin.document;

// Prevent errors in IE < 9, which does not support DOM Range and Selection
if (iframeWin.getSelection && iframeDoc.createRange) {
    iframeDoc.ondblclick = function(e) {
        if (e.target.nodeName.toLowerCase() == "img") {
            var sel = iframeWin.getSelection();
            var range = iframeDoc.createRange();
            range.selectNode(e.target);
            sel.removeAllRanges();
            sel.addRange(range);
        }
    };
}