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