Javascript 突出显示选定范围按钮

2022-01-24 00:00:00 range jquery javascript

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

I'm attempting to create a study tool for a page that allows a user to select any text on the page and click a button. This click then formats the selected text with a yellow background. I can make this work inside of a single tag, but if the range of selection is across multiple tags (for instance, the first LI in an unordered list along with half of the second), I have difficulty applying the style. I can't just wrap the selection with a span here unfortunately.

基本上，我想要与 contentEditable 和 execCommand 相关联的效果，而不需要在页面上实际进行任何可编辑的操作，除非通过单击一个按钮.

Basically, I want the effects associated with contentEditable and execCommand without actually making anything editable on the page except to apply a background color to the selected text with the click of a button.

我对 jQuery 解决方案持开放态度，发现 这个插件 似乎简化跨浏览器创建范围的能力，但我无法使用它将任何格式应用于所选范围.我可以从控制台看到它正在接受选择，但使用类似:

I'm open to jQuery solutions, and found this plug-in that seems to simplify the ability to create ranges across browsers, but I was unable to use it to apply any formatting to the selected range. I can see from the console that it's picking up on the selection, but using something like:

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

没有效果.

任何能指引我正确方向的帮助将不胜感激.

Any help pointing me in the right direction would be greatly appreciated.

推荐答案

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

The following should do what you want. In non-IE browsers it turns on designMode, applies a background colour and then switches designMode off again.

更新

固定在 IE 9 中工作.

Fixed to work in 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);
    }
}

相关文章