[技术博客]WEB实现划词右键操作

Posted 2020-12-22 jeromylee

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