3

私のサイトでは、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);

しかし、まだ機能しません。他に提案はありますか？

4

1 に答える 1

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);
        }
    };
}
于 2012-04-23T10:33:12.427 に答える