ContentEditable Div中的Javascript Set插入符号

Question

我有一个内容可编辑的div标签，以便用户可以输入div。 有一个功能可以在用户按下按钮时将链接添加到div中。 我希望将插入符号放置在链接之后，以便用户可以继续输入。 该链接可以插入多次。

示例代码：

<div id="mydiv" contenteditable="true" tabindex="-1">before <a href="#">link</a> after</div>

我需要以下代码才能在IE，Firefox，Opera，Safari和Chrome中使用。

谁能提供任何帮助？

Answer 1

假设您引用了插入到名为link的变量中的<a>元素：

function setCaretAfter(el) {
    var sel, range;
    if (window.getSelection && document.createRange) {
        range = document.createRange();
        range.setStartAfter(el);
        range.collapse(true);
        sel = window.getSelection(); 
        sel.removeAllRanges();
        sel.addRange(range);
    } else if (document.body.createTextRange) {
        range = document.body.createTextRange();
        range.moveToElementText(el);
        range.collapse(false);
        range.select();
    }
}

setCaretAfter(link);

Answer 2

我查看了CKEditor（http://ckeditor.com/）代码，发现它具有appendBogus（）函数，并插入了一个额外的<br> <span> </ span> </br>，然后将其删除。

当然，问题在于Gecko / IE浏览器还对<br>标记的工作方式也有细微差别（即，是否使用\\ r或\\ n插入范围，而不是添加<br>元素）

您可以阅读_source / plugins / enterkey / plugin.js，以了解处理IE和Gecko时的细微差别。 似乎是一个大黑客...