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建议将代码更改为该代码：

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

getSelection不适用于Chrome中的图片

1 个答案: