Показать сообщение отдельно
  #1 (permalink)  
Старый 23.11.2011, 02:32
Аспирант
Отправить личное сообщение для syegorius Посмотреть профиль Найти все сообщения от syegorius
 
Регистрация: 28.08.2010
Сообщений: 91

помогите разобраться с некоторыми ньюансами при написании 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

заранее очень благодарен за ответы
Ответить с цитированием