[技术博客]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 + "
" + 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