доброе время суток!
работаю над своим 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
заранее очень благодарен за ответы