Question

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

由于

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

Answer 2

我讨厌听起来很消极，但这太难了，这太荒谬了。你必须处理IE和其他人，实现是非常不同的。但是，如果你点击一个按钮来插入图像，你会失去焦点和插入位置，所以你需要记住一些onblur书签能力的位置（再次，IE不同）。如果您的editablecontent在iframe中并且保持自己的焦点，那么焦点就不是问题了。（注意：不要在这里讨论IE，我实际上更喜欢他们的实现到W3C标准drek。）

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

Answer 3

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

可编辑的Div Caret位置

3 个答案: