[技术博客]WEB实现划词右键操作
[技术博客]WEB实现划词右键操作
一、功能解释
简单地对题目中描述的功能进行解释:在浏览器中,通过拖动鼠标选中一个词(或一段文字),右键弹出菜单,且菜单为自定义菜单,而非浏览器本身的菜单。类似的功能有:网页版百度文库中的鼠标选中复制。
二、功能拆解
上述功能较为复杂,便于理解与实现,可以拆分为以下几部分:
- 获取鼠标划词的内容
- 实现自定义右键菜单(并为自定义右键菜单中的每个选项绑定合适的行为)
- 划词与右键菜单的绑定
三、技术实现
(一)获取鼠标划词的内容
简单地搜索之后,了解到这一功能可以通过JavaScript中的Selection
来实现。
Selection
是对当前激活选中区(即高亮文本)进行操作。在非IE浏览器(Firefox、Safari、Chrome、Opera)下可以使用window.getSelection()
获得selection
对象range
是一个fragment,可以理解成一个或多个range
组成了一个selection
(使用Ctrl
键可以进行多选高亮区域),但由于兼容性较差(IE, Chrome均不支持),很少有人使用。- 对于获取到的
selection
对象,可以通过一些JS方法转化为可以处理的对象,常用的方法是通过toString()
获得一份selection
对象的字符串copy,进行其他操作。 - 其他的高级用法暂时没有用到,有兴趣的话可以查看官方API或这篇博客。
- 在我们的项目中,需要将选中的区域显示在HTML页面中,还要传给后端,概括来说,操作如下:
var rg = window.getSelection(); //获取鼠标选中的区域
document.getElementById("some_html_element").innerText=rg.toString();//将该区域以字符串的形式显示在某个html元素中
$.ajax({//采用ajax提交内容
//其他内容略去
data:JSON.stringify({
"action":"some_action",
"data":{
"name":rg.toString();
}
})
})
当然也不是像上面展示的那么直白,显示在HTML中与传给后端有不同的Trigger。
(二)实现自定义右键菜单
- 关于自定义右键菜单,JQuery给出了非常实用的API——
contextmenu
。几乎所有的HTML自定义菜单都是用它来实现的。
下面是JQuery官方API的一个小例子,效果是右键点击p
区域的HTML元素,就会出现Hello World!
的弹窗。
$("p").contextmenu(function(){
alert("Hello World!");
});
实际上,在contextmenu
中,有很多可选的参数,下面以项目中的例子来进行简单介绍。
$.contextMenu({
selector: '.context-menu-one',
// callback: function(key, options) {
// var m = "clicked: " + key + "\n" + rg.toString();
// console.log(m);
// },
items: {
"relation":{
name: "添加关系:",
disabled: true},
"entity1": {
name: "作为实体1",
callback: function(key, options){
document.getElementById("div2").innerText=rg.toString();
e1 = rg.toString();
}},
"entity2": {
name: "作为实体2",
callback: function(key, options){
document.getElementById("div4").innerText=rg.toString();
e2 = rg.toString();
}},
"sep1": "---------",
"添加实体": {
name: "添加实体",
callback: function(key, options){
e = rg.toString();
sendEntityBeta();
location.reload();
}
}
}
});
selector
指定了应用自定义右键菜单的区域,效果与官方demo中的$("p")
相同。值得注意的是,selection
必须是一个HTML元素(在页面中实际存在的某一区域),而不是某个JS对象。自定义菜单将作用于整个HTML元素中,替换浏览器原有的右键菜单。callback
是该菜单的总回调函数,当选中菜单中的某个选项时,如果该选项没有额外定义回调函数callback
,那么将调用总回调函数。items
定义了菜单中的各个选项。每个item
的基本结构为"item":{}
,大括号中是该item
的描述信息,包括name
,disabled
等,以及刚刚提到的callback
可以每个选项绑定合适的行为。其中值得一提的是,如果令disabled: true
,将会禁用该选项,在菜单中,该项显示为灰色且无法点击,可以用此方法来在菜单内设置一些提示信息。- 除此之外,
items
也可以进行嵌套,实现子菜单的功能。(禁止套娃)
除上述参数外,还有许多高级的功能,在官方Plugin中,还有很多一看就懂的有启发性的demo。
(三)划词与右键菜单的绑定
- 在熟悉了
selection
与contextmenu
的使用后,上面这个问题也就迎刃而解了,只需要将contextmenu
中的selector
设置在需要getSelection()
的区域即可。 - 当然要是不了解上面两个工具的话,还是会踩到很多坑的。比如
selection
的兼容性问题、contextmenu
只能作用在HTML元素上等等。
四、总结
- 没做过是真的不知道,前端没那么好做T_T