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時的細微差別。 似乎是一個大黑客...