可编辑的 div 插入符号位置答案

【问题标题】：Editable Div Caret Position可编辑的 div 插入符号位置
【发布时间】：2010-12-02 20:17:31
【问题描述】：

我有一个可编辑的 div，我正在使用一个按钮将图像插入到 div 中。现在，我只是在做 document.getElementById('elementid').innerHTML。 += ;为了将图像添加到 div 的末尾。我想输入插入符号所在的图像。我该怎么做呢？

谢谢

【问题讨论】：

标签： javascript html

【解决方案1】：

在插入符号处插入一个元素并不难。以下函数在所有主流浏览器中的插入符号处（或在选择的末尾，如果选择了内容）插入一个节点：

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

【讨论】：

想知道如何将其设置为可编辑区域的末尾而不是特定点

【解决方案2】：

我讨厌听起来消极，但这太难了，太荒谬了。您必须处理 IE 和其他，并且实现方式大不相同。但它变得超级困难的地方是，如果您单击一个按钮插入图像，您将失去焦点和插入符号的位置，因此您需要使用一些 onblur 书签功能记住该位置（再次，IE 不同）。如果您的可编辑内容位于 iframe 中并保持自己的焦点，那么焦点就不是问题了。（注意：这里不贬低 IE，实际上我更喜欢他们的实现而不是 W3C 标准 drek。）

您可以查看一些开源文本编辑器以获取线索和提示。但是您会发现处理这些简单任务的代码量很大。

【讨论】：

如您所说，存在一些困难，但并非无法克服。我的 Rangy 库 (code.google.com/p/rangy) 可以帮助解决其中的大多数问题：它提供了一个 API 以及用于保存和恢复选择的方法。关于 IE 的选择/TextRange 优于 DOM 标准，我在很大程度上不同意您的看法：Range 在大多数方面都大大优于TextRange，除了移动边界以包含单词和移动到文档中的相邻文本。选择对象没有标准（WHATWG 正在工作），但 IE 的选择在其他浏览器中没有任何标准。
...实际上，现在我更仔细地阅读了这个问题，这项任务并不难。

【解决方案3】：

这有帮助吗：http://jsfiddle.net/8akDr/

【讨论】：

我知道您只是替换插入的字符/字符集，但我将如何在插入符号位置插入字符。它必须是模拟键盘输入还是其他方式？
哇...我很惭愧地说我认为您的意思是插入符号，就像文本中的插入符号字符一样...我为我的误解道歉:(