Question

我正在尝试为页面创建一个学习工具，允许用户选择页面上的任何文本并单击按钮。然后，此单击将使用黄色背景格式化所选文本。我可以在单个标签内部进行此工作，但如果选择范围跨越多个标签（例如，无序列表中的第一个LI以及第二个的一半），我将难以应用该样式。不幸的是，我不能在这里用一个跨度包装选择。

基本上，我希望效果与contentEditable和execCommand相关联，而不会在页面上实际编辑任何内容，只需单击按钮即可将背景颜色应用于所选文本。

我对jQuery解决方案持开放态度，并发现this plug-in似乎简化了跨浏览器创建范围的能力，但我无法使用它将任何格式应用于所选范围。我可以从控制台看到它正在接受选择，但使用类似的东西：

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

没有效果。

非常感谢任何帮助我指明正确方向的帮助。

Answer 1

以下应该做你想要的。在非IE浏览器中，它会打开designMode，应用背景颜色，然后再次关闭designMode。

<强>更新

已修复在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() });

代码未经测试。

Javascript突出显示所选范围按钮

2 个答案: