Question

我有一个contenteditable的div标签，以便用户可以键入div。当用户按下按钮时，有一个功能可以在div中添加一个链接。我希望在链接后定位插入符号，以便用户可以继续键入。链接可以多次插入。

示例代码：

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

我要求此代码适用于：IE，Firefox，Opera，Safari和Chrome。

任何人都可以提供任何帮助吗？

Answer 1

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

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（）函数以及插入一个额外的＆lt; br＆gt;＆lt; span＆gt; ＆LT; /跨度＆GT;＆LT; / BR＆GT;然后删除。

问题当然是Gecko / IE浏览器也有关于＆lt; br＆gt;的细微差别。标签也可以工作（即是否使用\ r或\ n插入范围而不是添加＆lt; br＆gt;元素）

你可以通过_source / plugins / enterkey / plugin.js来阅读处理IE＆amp;的不同细微差别。壁虎。这似乎是一个大黑客......

Javascript在CareEditable Div中设置插入符号

2 个答案: