Javascript Destaque selecionado Botão Faixa

Question

Eu estou tentando criar uma ferramenta de estudo para uma página que permite que um usuário para selecionar qualquer texto na página e clique em um botão. Esse clique em seguida, formata o texto selecionado com um fundo amarelo. Eu posso fazer isso dentro de trabalho de um único tag, mas se a gama de seleção é através de várias marcas (por exemplo, o primeiro LI em uma lista não ordenada, juntamente com metade do segundo), eu tenho dificuldade em aplicar o estilo. Eu não posso simplesmente embrulhar a seleção com uma extensão aqui infelizmente.

Basicamente, eu quero os efeitos associados contentEditable e execCommand sem realmente fazer qualquer coisa editável na página, exceto para aplicar uma cor de fundo para o texto selecionado com o clique de um botão.

Estou aberto a soluções jQuery, e encontrou este plug-in que parece simplificar a capacidade para criar faixas em navegadores, mas foi incapaz de utilizar para aplicar qualquer formatação para a gama seleccionada. Eu posso ver a partir do console que está pegando na seleção, mas usando algo como:

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

não tem efeito.

Qualquer ajuda me apontar na direção certa seria muito apreciada.

Answer 1

A seguir deve fazer o que quiser. Em não-IE navegadores gira sobre designMode, aplica-se uma cor de fundo e, em seguida, muda designMode novamente.

Atualizar

Fixed ao trabalho no 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

Tanto quanto eu sei, você não vai ser capaz de aplicar estilo de texto regular. Você algum tipo de elemento html para operar. Você poderia tentar envolver o texto selecionado com uma extensão e, em seguida, o estilo do span.

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

Eu adicionei uma classe de "embrulhado", bem como, de modo que em tentativas subseqüentes para realçar texto, você pode remover destaques anteriores.

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

código não foi testado.