Chromeの画像でgetSelectionが機能しない

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の提案に応じて1つにコードを変更します。

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