如何在可编辑的DIV中查找光标位置？

Question

我正在为内容可编辑的DIV（需要在文本框中呈现html内容编写自动完成程序。因此，首选在TEXTAREA上使用contenteditable DIV）。现在，当DIV中存在keyup / keydown / click事件时，我需要找到光标位置。这样我就可以在该位置插入html / text了。我不知道如何通过一些计算来找到它，或者是否有本机浏览器功能可以帮助我在可编辑的DIV中找到光标位置。

Answer 1

如果您只想在光标处插入一些内容，则无需显式查找其位置。以下函数将在所有主流桌面浏览器的光标位置插入一个DOM节点（元素或文本节点）：

function insertNodeAtCursor(node) {
    var range, html;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        range = document.selection.createRange();
        html = (node.nodeType == 3) ? node.data : node.outerHTML;
        range.pasteHTML(html);
    }
}

如果您想插入HTML字符串：

function insertHtmlAtCursor(html) {
    var range, node;
    if (window.getSelection && window.getSelection().getRangeAt) {
        range = window.getSelection().getRangeAt(0);
        node = range.createContextualFragment(html);
        range.insertNode(node);
    } else if (document.selection && document.selection.createRange) {
        document.selection.createRange().pasteHTML(html);
    }
}

UPDATE

[在OP的注释之后，我建议使用我自己的Rangy库，该库向行为类似于DOM Range的IE TextRange对象添加了一个包装器。 DOM Range由一个起点和终点边界（分别用一个节点和该节点内的偏移量表示）和一系列用于操纵Range的方法组成。 MDC article应该提供一些介绍。

Answer 2

其非常好的代码；）但是有一点要问-当我在文本中插入icon（image）时，是否可以在插入图像后移动光标，现在光标停留在插入图像之前。这将非常有帮助，我正在尝试将答复窗口放在一起，以便用户键入文本并插入情感图标，在此先谢谢您，胜利者