помогите разобраться с некоторыми ньюансами при написании WYSIWYG
 

доброе время суток!

работаю над своим WYSIWYG. пошарился в нете нашел много статей. вроде бы че-то да понял. сейчас работаю над тем что бы при нажатии на, например, кнопку "Bold" в редактируемый див вставлялся код "<span class="bold"></div>" или "<span class="bold">то что выделил пользователь</div>", если было что-то выделенно. но я сразу сталкнулся с проблемой.

опишу вкратце, что есть:

<!-- кнопки -->
<div class="editor-controls">
<span onclick="pasteSpan('b')">Bold</span>
<span onclick="pasteSpan('i')">Italic</span>
</div>
<!-- кнопки -->

<!-- область в которой я редактирую -->
<div class="content" contenteditable="true">

</div>
<!-- область в которой я редактирую -->

в нете нашел вот такую ф-цию insertHtmlAtCursor(html), для примера просто покажу как я ее использую:

function pasteSpan(p){
    insertHtmlAtCursor('<span class="bold">Hello!</span>')
}

function insertHtmlAtCursor(html) {
    var sel,range,node;
    if(window.getSelection){
        sel=window.getSelection();
        if(sel.getRangeAt&&sel.rangeCount){
            range=window.getSelection().getRangeAt(0);
            node=range.createContextualFragment(html);
            range.insertNode(node);
        }
    } 
    else if(document.selection&&document.selection.createRange)document.selection.createRange().pasteHTML(html);
}

я не ждал что как только я ее вставлю все сразу начнет работать правильно.

теперь, что вышло - при нажатии на "Bold" добавляется "<span class="bold">Hello!</span>"? но не в div.content, а прямо в <span onclick="pasteSpan('b')">Bold</span>, по-этому первый вопрос:

как указать в insertHtmlAtCursor последнюю позицию курсора в div.content, перед тем как я нажал на <span onclick="pasteSpan('b')">Bold</span>

а второй вопрос - как понять было ли выделено что-то пользователем перед тем как он нажал <span onclick="pasteSpan('b')">Bold</span> и заменить в тексте "то что выделено" на "<span class="bold">то что выделено</span>" или же просто вставить в место, где последний раз был курсор "<span class="bold"></span>" и поместить курсор в этот span

заранее очень благодарен за ответы

м.б. будет полезно http://webew.ru/articles/192.webew

ну там совсем все просто и ответа там не нашел

и снова сдрасте.

вообщем с первым вопросом почти полностью разобрался кроме одного ньюанса...

это вкратце кусок кода, который я использую:

var cursorStart=document.createElement('span'),savedRange=window.getSelection().getRangeAt(0)
cursorStart.className='white';
savedRange.surroundContents(cursorStart)

теперь, прошу, подскажите как быть в таком случае:

есть вот такой, например, участок. если я выделяю 'ello'

<span class="bold">H|ello|</span> <span class="under">world</span>:)

то все работает нормально, ну а если происходит вот такое (выделяем 'ello</span> <span class="under">wo')

<span class="bold">H|ello</span> <span class="under">wo|rld</span>:)

то получается проблема.

подскажите как справится с этим и сделать что б на выходе было вот так:

<span class="white">ello</span></span> <span class="under"><span class="white">wo</span>

и еще один вопрос - если я ничего не выделяю, то span.white вставляется нормально, но курсор не устанавливается внутри этого нового спана. скажите как установить курсор во внутрь

заранее спасибо)