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

Posted jeromylee

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[技术博客]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 + "
" + 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。

(三)划词与右键菜单的绑定

  • 在熟悉了selectioncontextmenu的使用后,上面这个问题也就迎刃而解了,只需要将contextmenu中的selector设置在需要getSelection()的区域即可。
  • 当然要是不了解上面两个工具的话,还是会踩到很多坑的。比如selection的兼容性问题、contextmenu只能作用在HTML元素上等等。

四、总结

  • 没做过是真的不知道,前端没那么好做T_T

以上是关于[技术博客]WEB实现划词右键操作的主要内容,如果未能解决你的问题,请参考以下文章

js如何实现一个通用的“划词高亮”在线笔记功能

js如何实现一个通用的“划词高亮”在线笔记功能

Chrome划词翻译-Saladict

手机上实现划词朗读功能

代码片段 - Golang 实现简单的 Web 服务器

划词标注2-使用花括号概括信息