Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #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

заранее очень благодарен за ответы
Ответить с цитированием
  #2 (permalink)  
Старый 23.11.2011, 11:46
Аватар для Serg_pnz
Сам по себе
Отправить личное сообщение для Serg_pnz Посмотреть профиль Найти все сообщения от Serg_pnz
 
Регистрация: 09.06.2009
Сообщений: 963

м.б. будет полезно http://webew.ru/articles/192.webew
Ответить с цитированием
  #3 (permalink)  
Старый 23.11.2011, 18:07
Аспирант
Отправить личное сообщение для syegorius Посмотреть профиль Найти все сообщения от syegorius
 
Регистрация: 28.08.2010
Сообщений: 91

ну там совсем все просто и ответа там не нашел
Ответить с цитированием
  #4 (permalink)  
Старый 25.11.2011, 02:18
Аспирант
Отправить личное сообщение для syegorius Посмотреть профиль Найти все сообщения от syegorius
 
Регистрация: 28.08.2010
Сообщений: 91

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

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

это вкратце кусок кода, который я использую:
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 вставляется нормально, но курсор не устанавливается внутри этого нового спана. скажите как установить курсор во внутрь

заранее спасибо)
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Помогите пожалуйста разобраться Kupu4 Ваши сайты и скрипты 0 21.01.2010 10:44
Помогите разобраться с повторением при генерации массива (Javascript) JsLoveR Javascript под браузер 4 16.12.2009 15:26
Помогите разобраться со скриптом! Чайник Элементы интерфейса 1 13.03.2009 23:57
Помогите разобраться с логикой поведения скрипта MarkupDeveloper jQuery 3 21.06.2008 18:04