Webkit, IE отменяет выделение текста

Question

Я работаю над созданием плагина jQuery для contentEditable. Я создал панель инструментов для выполнения действий с текстом, таких как выделение жирным шрифтом, курсивом и т. Д. С использованием execCommand. Проблема в том, что когда вы выбираете текст и нажимаете одну из кнопок (div с событиями onclick), он отменяет выделение текста, который вы выбрали (все браузеры). Чтобы исправить это, я использовал:

toolBar.onmousedown=function(){return false};

Что хорошо работает в Firefox и Opera. Я пытаюсь использовать

toolBar.onselectstart = function(){return false};

, который запрещает выделение текста в IE. Однако ни webkit, ни IE не работают. Я видел, как это было сделано с помощью кнопок ввода, но я бы предпочел использовать div. Есть идеи?

Answer 1

Простая альтернатива - использовать теги для вашей панели инструментов. Таким образом, он не теряет выделение текста.

Answer 2

Я решил эту проблему путем повторного выбора текста.

При наведении мыши я фиксирую информацию о выборе:

$.getSelection = function() {
    // ie has its own way of doing things from here on.
    if($.browser.msie) return document.selection.createRange();

    if (window.getSelection) {
        var selection = window.getSelection();
    }
    else if (document.selection) { // should come last; Opera!
        var selection = document.selection.createRange();
    }

    if (selection.getRangeAt)
        var range = selection.getRangeAt(0);
    else { // Safari!
        var range = document.createRange();
        range.setStart(selection.anchorNode, selection.anchorOffset);
        range.setEnd(selection.focusNode, selection.focusOffset);
    }
    if (!range.toString().match(/[^\t\r\n ]/)) return false;

    var ret = {};

    // start end length text

    ret.startContainer  = range.startContainer;
    ret.start   = range.startOffset;
    ret.endContainer    = range.endContainer;
    ret.end     = range.endOffset;
    ret.length = ret.end - ret.start;
    ret.collapsed   = range.collapsed;

    return ret;
};

Это хранится где-то по вашему выбору.

Затем я либо повторно выбираю текст, если браузер совместим с W3c для диапазона DOM (т. Е. Почти все, кроме ie), и выполняю execCommand:

function handleReselection() {
    if($.browser.msie) {
        return this.selection;
    }
    else {
        setSelection(this.selection);
        return document
    }
}

function setSelection(selection) {
    var sel = window.getSelection();
    sel.removeAllRanges();
    var range = document.createRange();
    range.setStart(selection.startContainer, selection.start);
    range.setEnd(selection.endContainer, selection.end);
    sel.addRange(range);
}

handleReselection().execCommand('bold', false, null);