如何在 contenteditable 元素中获取所选元素

【问题标题】：How to get the selected element inside a contenteditable element如何在 contenteditable 元素中获取所选元素
【发布时间】：2016-04-20 21:24:48
【问题描述】：

我尝试过的

我查看了this question 和this one，问题是它给了我当前选择的内容，但我想要的是 dom 元素。

我想做什么

我正在寻找一种方法来获取当前正在使用 javascript 编辑的元素的标记名。例如：

<article contenteditable=true>
    <h2>Some List</h2>
    <ul>
        <li>Item 1</li>
        <li>Item *caret here* 2</li>
        <li>Item 3</li>
    </ul>
</article>

我希望能够将列表项放入 javascript el 变量中。所以我可以做例如：

el.tagName
el.className

有谁知道如何做到这一点？发送 :)

【问题讨论】：

标签： javascript html selection contenteditable

【解决方案1】：

您可以使用Range 来引用文档的选定部分，然后检查commonAncestorContainer 以检索<ul>。
在您的示例中，如果您选择列表的一部分，则可以使用以下内容检索 <ul>：

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var ulTag = range.commonAncestorContainer;

如果您想要获取光标指向的元素（没有选择），您可以参考startContainer 属性，然后检查parentNode 以检索<li>。例如：

    var sel = window.getSelection();
    var range = sel.getRangeAt(0);
    var pointedLiTag = range.startContainer.parentNode;

请注意，这些只是简单的用例，在真实的文档中有很多嵌套的元素，所以在使用它之前，您必须确保您检索到的元素是您期望的。

【讨论】：