Кнопка выделения выделенного диапазона Javascript

Question

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

По сути, я хочу, чтобы эффекты, связанные с contentEditable и execCommand, фактически не делали ничего редактируемого на странице, за исключением применения цвета фона к выделенному тексту нажатием кнопки.

Я открыт для решений jQuery и нашел этот плагин , который, кажется, упрощает возможность создания диапазонов в браузерах, но я не смог использовать его для применения любого форматирования к выбранному диапазону , Я вижу из консоли, что это происходит при выборе, но используется что-то вроде:

var selected = $().selectedText();
$(selected).css("background-color","yellow");

не имеет никакого эффекта.

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

Answer 1

Следующее должно делать то, что вы хотите. В браузерах не IE он включает designMode, применяет цвет фона и затем снова выключает designMode.

UPDATE

Исправлено для работы в IE 9.

function makeEditableAndHighlight(colour) {
    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 highlight(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);
    }
}

Answer 2

Насколько я знаю, вы не сможете применить стили к обычному тексту. Вы какой-то элемент HTML для работы. Вы можете попробовать обернуть выделенный текст в промежуток, а затем оформить его.

$().selectedText().wrap("<span></span>").parent().addClass("wrapped").css({backgroundColor: "Yellow"});

Я также добавил класс «обернутых», чтобы при последующих попытках выделить текст вы могли удалить предыдущие выделения.

$(".wrapped").each(function(){ ($(this).replaceWith( $(this).text() });

Код не проверен.