Javascript Quandary: создание инструмента выделения маркера ... почти - PullRequest
Новая
       18

Javascript Quandary: создание инструмента выделения маркера ... почти

4 голосов
/ 07 августа 2011

Я работаю над небольшим плагином JS, который хочу функционировать точно так же, как настоящий маркер.Возьмите стандартный div HTML-текста (с дочерними элементами), выделите текст с помощью мыши и оставьте выделение без изменений при наведении курсора мыши вверх.Кажется, довольно прямо, верно?

Вот что у меня есть: http://efflux.us/text/views/select.php (окно справа просто выводит ваш выбор для целей тестирования)

Так что если вывыделите несколько слов текста, все отлично работает.Попробуйте выбрать несколько групп слов, и вы заметите изменения фона CSS.Однако у меня есть две вопиющие проблемы ...

1) Выбор нескольких строк текста не работает.При выборе нескольких строк функция getSelection () не захватывает теги <br />, которые необходимы для сопоставления строки внутри основного контейнера <div class='text>.Эти теги <br /> имеют решающее значение для приложения, которое я создаю, поэтому они определенно необходимы.При их удалении можно выделить несколько строк.

2) При выборе общего слова или фразы каждый его экземпляр выделяется.Я хотел бы, чтобы выделенный текст был выделен, но не могу понять.Попробуйте выбрать самое первое слово "The" ... вы увидите, что произойдет.

Примечания к сторонам ... Я основываю функцию подсветки на плагине подсветки Johann Burkard ... но не могу придумать ни одногоспособ дальнейшей модификации скрипта.Я готов написать что-то свежее, но ломал голову, чтобы понять это.

Любая помощь будет признательна !!

1 Ответ

4 голосов
/ 07 августа 2011

На самом деле, это достаточно просто, используя document.execCommand(). Это немного усложняется тем фактом, что вам нужно временно сделать документ редактируемым в браузере, отличном от IE, для работы document.execCommand(), что, в свою очередь, разрушает выделение в некоторых браузерах, но это достаточно легко обойти. Работает во всех основных браузерах, включая IE 6.

ОБНОВЛЕНИЕ: исправлено для IE 9.

jsFiddle: http://jsfiddle.net/timdown/Hp7Zs/32/

Код: 

function makeEditableAndHighlight(colour) {
    var range, sel = window.getSelection();
    if (sel.rangeCount && sel.getRangeAt) {
        range = sel.getRangeAt(0);
    }
    document.designMode = "on";
    if (range) {
        sel.removeAllRanges();
        sel.addRange(range);
    }
    // Use HiliteColor since some browsers apply BackColor to the whole block
    if (!document.execCommand("HiliteColor", false, colour)) {
        document.execCommand("BackColor", false, colour);
    }
    document.designMode = "off";
}

function highlightSelection(colour) {
    var range, sel;
    if (window.getSelection) {
        // IE9 and non-IE
        try {
            if (!document.execCommand("BackColor", false, colour)) {
                makeEditableAndHighlight(colour);
            }
        } catch (ex) {
            makeEditableAndHighlight(colour)
        }
    } else if (document.selection && document.selection.createRange) {
        // IE <= 8 case
        range = document.selection.createRange();
        range.execCommand("BackColor", false, colour);
    }
}
...