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 回答