getSelection在Chrome

Question

工作的图像在我的网站我使用的使用iframe一个所见即所得的编辑器。

当我选择以一个链接到它双击文本，在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); 
     } 
    }; 
}