getSelection(), createRange() и перенос курсора в пустой тег
 

Доброго времени суток! Возникла проблема такого плана: при фокусе элемента <div> с атрибутом contenteditable="true", в этом div-е создается пустой параграф <p></p>, также, после создания параграфа, курсор ввода текста должен переместится в этот параграф и при вводе какого-либо текста, текст должен заносится не в <div> а в <p>. Вот как-то у меня совсем это не получается, приведенный ниже код работает только если в параграфе будет хоть немного текста.

<div id="editor" contenteditable="true"></div>

$('#editor').focus(function() {
        if($(this).html() == '') {
            $(this).html('<p></p>');

            var par = $(this).children('p').get(0);
            rng = document.createRange();
            rng.selectNode(par);
            sel = window.getSelection();
            sel.removeAllRanges();
            sel.addRange(rng);
        }
});

Ну так, потому то wysiwyg редакторы типа CKEditor/TinyMCE вставляют <br>
Вобще, не советую связываться с contenteditable самому. Лучше заюзать готовый вылизанный скрипт. Например тот же CKEditor - он умеет работать в режиме contenteditable.