ContentEditable Div中的Javascript Set插入符号

Question

I have a div tag that is contenteditable so that users can type in the div. There is a function that adds a link into the div when the user presses a button. I would like the caret to be positioned after the link so that users can continue to type. The link can be inserted many times.

Example Code:

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

I require this code to work in: IE, Firefox, Opera, Safari and Chrome.

Can anyone offer any help?

Answer 1

Assuming you have a reference to the <a> element you've inserted in a variable called 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

I looked inside the CKEditor (http://ckeditor.com/) code and found that it has an appendBogus() function as well as inserts an extra <br><span> </span></br> that is then deleted.

The problem of course is that Gecko/IE browsers also have nuances about how <br> tags work too (ie whether to use \\r or \\n to insert into the range vs. adding an <br> element)

You can read through the _source/plugins/enterkey/plugin.js to see the different nuances with handling IE & Gecko. It seems like one big hack...