3

我创建了一个带有文本部分和链接的 contentEditable div。双击链接将选择链接文本。

<div contentEditable="true">
   This is a text and <a href="http://www.google.com">This_is_a_link</a>
</div>

之后调用 document.getSelection().getRangeAt(0).startContainer 将返回 div：

// => <div contenteditable="true">

而不是链接。我找不到找到选择 div 的哪一部分的方法。

看到这个jsfiddle（双击“This_is_a_link”，会有一个带有startContainer的控制台日志）：http: //jsfiddle.net/UExsS/1/

（来自小提琴的强制性 JS 代码）

$(function(){
    $('a').dblclick(function(e) {

        setTimeout(function() {
            console.log(window.getSelection().getRangeAt(0));
        }, 500);

    });
});

请注意，Chrome 具有正确的行为，并且在 Chrome 中运行上述 jsfiddle 将为 startContainer 提供 textElement。

有没有人遇到过这个问题？你找到解决方法了吗？

4

1 回答 1

3

不要认为它是 Firefox 的错误，只是一种不同的实现。当您双击链接时，Firefox 不仅选择了文本，而且选择了整个 a-tag，因此选择的父节点正确设置为 div 容器。

我在你的小提琴中添加了这几行代码来证明这一点：

var linknode = window.getSelection().getRangeAt(0).commonAncestorContainer.childNodes[1];
console.log(linknode);        
console.log(window.getSelection().containsNode(linknode, false));

分叉的小提琴：http: //jsfiddle.net/XZ6vc/

当您运行它时，您会在 javascript 控制台中看到linknode包含您的链接，并且检查链接是否完全包含在选择中返回 true。

这也是该问题的一种可能解决方案，尽管不是理想的解决方案。遍历您的 contenteditable 中的所有链接，并检查其中一个是否完全包含在选择中。

尽管有一句忠告：如果不需要，请不要重新发明轮子；-) 很可能有一些库/框架可以满足您的需求。

于 2013-10-07T22:20:28.783 回答