可编辑的Div光标位置

Question

我有一个可编辑的div，并使用按钮将图像插入到div中。目前，我只是使用document.getElementById('elementid').innerHTML. +=; 来将图像添加到div的末尾。我想把图像输入到光标所在的位置。我该怎么做呢？

谢谢

- intl

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

- Tim Down

---

我在想如何将此设置为可编辑区域的末尾，而不是特定点。 - kqlambert

Answer 2

我不想听起来消极，但这真的非常困难。你需要处理IE和其他浏览器，而且它们的实现方式差异很大。但最难的地方在于，如果你点击插入图像的按钮，就会失去焦点和光标位置，因此你需要使用一些onblur书签记忆位置（同样，IE与众不同）。如果你的editablecontent在一个iframe中并保持自己的焦点，那么焦点问题就不是那么重要了。（注意：我并不是在批评IE，在W3C标准的垃圾实现中，我实际上更喜欢他们的实现方式。）

你可以查看一些开源文本编辑器以获得提示和建议。但你会发现，为处理这些简单任务而编写的代码量非常庞大。

- mwilcox

---

你提到了一些困难，但它们并非不可克服。我的 Rangy 库（http://code.google.com/p/rangy）可以帮助解决其中大部分问题：它提供了单一的 API 和用于保存和恢复选择的方法。我在很大程度上不同意你对 IE 的选择/TextRange 比 DOM 标准更好的看法：Range 在大多数方面都比 TextRange 强得多，除了将边界移动以包含单词和移动到文档中相邻的文本之外。虽然目前还没有选择对象的标准（WHATWG 正在制定），但是 IE 的选择与其他浏览器中的选择相比并不占优势。 - Tim Down

实际上，仔细阅读问题后，这个任务并不那么困难。 - Tim Down

Answer 3

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

- Aaron Hathaway

---

我理解你只是想替换插入的字符/字符集，但如何在插入符位置插入字符呢？这是否需要模拟键盘输入或其他方式？ - intl

哇...我非常惭愧地承认，我以为你指的是插入符号，就是文本中的文字插入符号...对于我的误解，我感到非常抱歉 :( - Aaron Hathaway