Javascript 在 ContentEditable div 中设置插入符号答案

【问题标题】：Javascript Set Caret in ContentEditable DivJavascript 在 ContentEditable div 中设置插入符号
【发布时间】：2010-08-31 17:55:50
【问题描述】：

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

示例代码：

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

我需要此代码在：IE、Firefox、Opera、Safari 和 Chrome 中工作。

谁能提供帮助？

【问题讨论】：

见：Set cursor position on contentEditable <div>。

标签： javascript html contenteditable caret

【解决方案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);

【讨论】：

感谢蒂姆的帮助。我尝试了下面的代码，但无法让它在 Windows 上的 Firefox 中工作:(
before link after
您的按钮开始标签中需要class="unselectable"。
谢谢蒂姆。我试过了，但没有运气：
before link after
只是为了更新：脚本确实将插入符号放在正确的位置，只是你看不到它。

【解决方案2】：

我查看了 CKEditor (http://ckeditor.com/) 代码，发现它有一个 appendBogus() 函数，并插入了一个额外的
然后被删除。

问题当然是 Gecko/IE 浏览器也有关于
标签如何工作的细微差别（即是否使用 \r 或 \n 插入范围与添加
元素）

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

【讨论】：