我正在开发一个小插件,我希望它的功能与真正的荧光笔完全相同。使用标准的html文本div(带有子项),用鼠标选择文本,并在鼠标向上保持高亮显示。看起来相当直接,对吧?
以下是我到目前为止:http://efflux.us/text/views/select.php (右边的窗口只输出您的选择以进行测试)
因此,如果您选择几个文字,一切正常。尝试选择几组单词,您会注意到css背景的变化。但是,我有两个明显的问题......
1)选择多行文字不起作用。当选择多行时,getSelection()函数不会获取匹配主容器<br />
内的字符串所需的<div class='text>
标签。这些<br />
标记对我正在构建的应用程序至关重要,因此它们肯定是必需的。删除它们时,可以选择多行。
2)当选择一个共同的单词或短语时,它的每个实例都会被突出显示。我希望只突出显示所选文本,但无法弄明白。尝试选择第一个单词“The”......你会看到会发生什么。
旁注... 我基于Johann Burkard的高亮插件突出显示功能......但是想不出任何进一步修改脚本的方法。我愿意写一些新鲜的东西,但一直绞尽脑汁想出来。
任何帮助都将不胜感激!!
答案 0 :(得分:4)
实际上,使用document.execCommand()
这是相当简单的。由于您需要暂时使文档在非IE浏览器中可编辑以使document.execCommand()
正常工作,这有点复杂,这反过来会破坏某些浏览器中的选择,但这很容易解决。它适用于所有主流浏览器,包括IE 6。
更新:已修复IE 9。
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);
}
}