Javascript Quandary：创建一个荧光笔工具......几乎就在那里 [英] Javascript Quandary: Creating a highlighter pen tool... almost there

问题描述

我正在开发一个小插件，我希望它的功能与真正的荧光笔完全相同。使用标准的html文本div（带有子项），用鼠标选择文本，并在鼠标向上保持高亮显示。看起来相当直接，对吗？

I'm working on a little JS plugin that I want to function exactly like a real highlighter pen. Take a standard div of html text (with children), select text with mouse, and leave the highlighting intact on mouse up. Seems fairly straight forward, right?

这是我到目前为止所做的： http://efflux.us/text/views/select.php
（右边的窗口只输出您的选择用于测试目的）

Here is what I have so far: http://efflux.us/text/views/select.php (the window on the right just outputs your selection for testing purposes)

因此，如果您选择几个文字，一切正常。尝试选择几组单词，您会注意到css背景的变化。但是，我有两个明显的问题......

So if you select a few words of text, everything works fine. Try selecting a few groups of words, and you'll notice the css background changes. However, I have two glaring issues...

1）选择多行文字不起作用。当选择多行时，getSelection（）函数不会获取匹配主容器内的字符串所需的< br /> 标签.. < div class ='text> 。这些< br /> 标签对我正在构建的应用程序至关重要，因此绝对需要它们。删除它们时，可以选择多行。

1) Selecting multiple lines of text does not work. When selecting multiple lines, the getSelection() function does not grab the <br /> tags.. which are needed to match up the string inside the main container <div class='text>. These <br /> tags are crucial to the app I'm building, so they are definitely needed. When removing them, multiple lines can be selected.

2）选择常用词或短语时，会突出显示每个实例。我希望只突出显示所选文本，但无法弄明白。尝试选择第一个单词The......你会看到会发生什么。

2) When selecting a common word or phrase, every instance of it gets highlighted. I would like just the selected text to be highlighted, but can't figure it out. Try selecting the very first word "The"... you'll see what happens.

旁注...
我基于突出显示功能Johann Burkard的突出插件..但想不出任何进一步修改脚本的方法。我愿意写一些新鲜的东西，但一直绞尽脑汁想出来。

Side notes.. I'm basing the highlighting functionality off Johann Burkard's highlight plugin.. but can't think of any way to further modify the script. I'm willing to write something fresh, but have been racking my brain to figure it out.

任何帮助都会受到赞赏!!

Any help would be appreciated!!

推荐答案

实际上，使用 document.execCommand（）这是相当简单的。一些事实，你需要暂时使文件在非IE浏览器中可编辑，以便 document.execCommand（）工作，这反过来又会破坏某些选择。浏览器，但这很容易解决。它适用于所有主流浏览器，包括IE 6。

Actually, this is reasonably straightforward using document.execCommand(). It's slightly complicated by the fact that you need to temporarily make the document editable in non-IE browser for document.execCommand() to work, which in turn destroys the selection in some browsers, but that's easy enough to work around. It works in all major browsers, including IE 6.

更新：已修复IE 9。

jsFiddle： http://jsfiddle.net/timdown/Hp7Zs/32/

jsFiddle: http://jsfiddle.net/timdown/Hp7Zs/32/

代码：

function makeEditableAndHighlight(colour) {
    var range, 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 highlightSelection(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);
    }
}

这篇关于Javascript Quandary：创建一个荧光笔工具......几乎就在那里的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！