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);
    }
}