Vloženie emotikonu do contenteditable – JavaScript, AJAX, jQuery – Fórum – Programujte.com

Nazdárek. Vytvoril som si script na vkladanie emotikonov do textu s použitím contenteditable div. Problém je, že ak vložím emotikona na koniec textu, tak kurzor preskočí na koniec bloku (div-u). Viď obrázok:

Samotný kód vyzerá následovne:

<script>
function pasteHtmlAtCaret(emo) {
var html="<img src='./images/emojis/"+emo+"' style='width: 1em ; height: 1em; display: inline'>";
    var sel, range;
    if (window.getSelection) {
        sel = window.getSelection();
        if (sel.getRangeAt && sel.rangeCount) {
            range = sel.getRangeAt(0);
            range.deleteContents();var el = document.createElement("div");
            el.innerHTML = html;
            var frag = document.createDocumentFragment(), node, lastNode;
            while ( (node = el.firstChild) ) {
                lastNode = frag.appendChild(node);
            }
            range.insertNode(frag);
            if (lastNode) {
                range = range.cloneRange();
                range.setStartAfter(lastNode);
                range.collapse(true);
                sel.removeAllRanges();
                sel.addRange(range);
            }
        }
    } else if (document.selection && document.selection.type != "Control") {
        document.selection.createRange().pasteHTML(html);
    }
}
</script>

<div class='box_wt row' style='width: 500px; display: inline-block; float: left; margin: 30px; padding: 5px;'>
<div id='test' contenteditable='true' class='media'>
    Here is some nice text
</div>
</div>

Viete mi niekto poradiť v čom by mohol byť problém?

Zkus pouzit span / font-size/line-height, padding, background.
A kdyz po smajlikovi pises dal, tak, kam dava pismenka?

#2 peter
Keď začnem písať tak písmenka pokračujú normálne hneď za smajlíkom. Span som skúšal, ale výsledok bol rovnaký.

u jedne aplikace potrebuji delat focus po prekresleni tabulky do vyhledavaciho inputu a resim to takto. treba by slo nec podobne najit i pro editable 

			el.focus();
			el.value = el.value;
			el.selectionStart = el.selectionEnd = el.value.length; // aby dal kurzor na konec