Append div at cursor in a contenteditable div

Question

I have a contenteditable div where I need to append div(child) at the caret position?

I successfully added text at caret position using some sample in the stack. But i didn't find a way to append a div at the caret position.

How to do it?

var appendText = "<div class='ui-state-default' contenteditable='false'>
<span>"+ui.draggable.text()+"</span>
<span class='ebAppendFieldClose'>x</span>
</div>"

$("#ebPlaceholder").append(appendText);

Right now i use the normal method (like this).

Please show us your current code :) – Reinstate Monica Cellio Jul 25 '13 at 11:59 — Reinstate Monica Cellio, Jul 25 '13 at 11:59

score 3 · Accepted Answer · answered Jul 25 '13 at 12:05

not sure what you're trying to do; is it placing the div on the cursor position?

var appendText = "<div class='ui-state-default' contenteditable='false'><span>" + ui.draggable.text() + "</span><span class='ebAppendFieldClose'>x</span></div>"

//I'm using 'click', but it can be whatever you want
$("#ebPlaceholder").on('click', function(e) {
    appendText.css({position: 'absolute',
        top: e.clientY + 'px',
        left: e.clientX + 'px'
    }); 
    e.target.append(appendText);
});

Append div at cursor in a contenteditable div

1 Answers1