Как сохранить выделение после клика в HTML?

Question

Я кодирую WYSIWYG-редактор (не могу использовать что-то вроде TinyMCE - придется самому кодировать), и я хочу, чтобы пользователи могли устанавливать текст как жирный, подчеркнутый, ссылки и т. Д., Добавляя теги в HTML.Проблема, с которой я столкнулся, заключается в том, что когда пользователи выбирают текст в редактируемом элементе div, а затем нажимают кнопку «Полужирный», он не может найти выделение, потому что оно было отменено, поскольку произошло событие click.Как я могу это остановить?Есть ли лучший способ сделать это?

Answer 1

Вам нужно сделать кнопку невыбираемой, что можно сделать с помощью CSS в большинстве браузеров и с атрибутом unselectable в IE и Opera.Вот как это сделать:

Как отключить выделение выделения текста с помощью CSS?

Answer 2

Еще один, возможно, лучший способ добиться этого - вызвать функцию protectDefault () в событии mousedown для кнопки «Полужирный» (когда выбор очищается - по крайней мере, в Chrome):

$('div.boldButton').mousedown(function(event) {
  event.preventDefault();
});

Answer 3

Эта функция может помочь вам:

jQuery.fn.getSelectedText = function() {
    var sSelectedText = "";
    // all browsers, except IE before version 9
    if (window.getSelection) {
        var sTagName = this.get(0).tagName.toLowerCase();
        sSelectedText = (
            sTagName == 'input' || sTagName == 'textarea' ?
            this.val().substring (
                this.get(0).selectionStart
                , this.get(0).selectionEnd
            ) :
            document.getSelection().toString()
        );
    }
    // Internet Explorer before version 9
    else {
        if (document.selection.createRange) {
            sSelectedText = document.selection.createRange().text;
        }
    }
    return sSelectedText;
}

Также смотрите мой jsfiddle .

=== ОБНОВЛЕНИЕ ===

Если ваша кнопка не является <input type="button/submit" ... /> или <button ...>, вы должны помнить выделенный текст после каждого нажатия:

var sSelectedText = '';
$('body').click(function() {
    sSelectedText = $('#text').getSelectedText();
});
$('body').dblclick(function() {
    sSelectedText = $('#text').getSelectedText();
});

При нажатии кнопки выделенный текст находится в sSelectedText:

$('#button').click(function(e) {
    alert(sSelectedText);
});

Также смотрите мой новый jsfiddle .

Answer 4

Одной из идей является отслеживание выбора (путем прослушивания событий mouseup), чтобы ваш код знал, что выделено в данный момент, и вы можете что-то с ним сделать, когда нажата кнопка ...

В этой статье есть несколько хороших примеров кода.