выполнить команду при пустом выделении

Я работаю над специализированным редактором Text/HTML с Javascript и JQuery в contenteditable div. Я реализовал различные стили текста (жирный, курсив,...) с помощью execcommand. Кажется, это работает, только если выделенный текст не пуст. Каков наилучший способ решить эту проблему?

Вот пример того, что я хочу сделать с Text, являющимся текстом в редакторе, HTML, являющимся соответствующим HTML-кодом, и | будучи курсором Позиция:

Text: Hello| World
HTML: <b>Hello| World</b>

Нажав «жирную» кнопку, команда execcommand('bold') должна быть выполнена в выбранной позиции, а курсор должен быть помещен внутри измененной позиции.

Text: Hello| World    
HTML: <b>Hello</b>|</b> World</b>

Это не работает. Я нашел обходной путь, добавив текстовый узел, содержащий пробел. Кажется, это работает в Internet Explorer, но не в Firefox. Вот простой пример:

HTML:

<div id="textcontent" contenteditable="true" overflow:auto;"><p>Enter text</p></div>
<button type="button" id="setBold">Bold</button>

Javascript:

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    }
    else {
        var selObj = document.getSelection();
        var selRange = selObj.getRangeAt(0);        
        var newNode = document.createTextNode(' ');

        selRange.deleteContents();
        selRange.insertNode(newNode);

        selObj.removeAllRanges();
        selObj.addRange(selRange);

        document.execCommand('bold');

        selRange.deleteContents();
        selObj.removeAllRanges();
        selObj.addRange(selRange);        
    }
});

И соответствующий jsfiddle здесь: http://jsfiddle.net/andibioticum/3V7pK/


javascript html jquery dom execcommand
person Andibioticum    schedule 16.06.2014    source источник

Ответы (1)


arrow_upward
3
arrow_downward

Я изменил свое обходное решение, вставив текстовый узел, содержащий букву, вызвав команду execcommand для этого узла, затем удалив его и установив курсор с помощью focus().

$('#setBold').click(function () {
    if (document.getSelection() != "") {
        document.execCommand('bold');
    } 
    else {
        //get selected position
        var selObj = document.getSelection();
        //get range of selected position
        var selRange = selObj.getRangeAt(0);
        //Insert node with dummy text 'd'
        var newNode = document.createTextNode('d');
        selRange.insertNode(newNode);
        selObj.removeAllRanges();
        selObj.addRange(selRange);

        //Execute command on dummy
        document.execCommand('bold');

        //Delete dummy from range
        selRange.setStart(newNode, 0);
        selRange.setEnd(newNode, 1);
        selRange.deleteContents();

        selObj.removeAllRanges();
        selObj.addRange(selRange);
        //Focus on empty element
        $('#textcontent').focus();
   }
});

См. скрипку здесь: http://jsfiddle.net/andibioticum/XJuRf/

person Andibioticum    schedule 24.06.2014