CN109901764A - 一种代码编辑器右键菜单功能实现方法及电子设备 - Google Patents

Abstract

本发明公开一种代码编辑器右键菜单功能实现方法及电子设备，其中，所述实现方法包括步骤：预先在第三方库中绑定鼠标右击事件；在所述鼠标右击事件中绑定渲染函数；当接收到鼠标右击事件时，通过所述渲染函数分配一行为；通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。通过本发明，用户可在代码编辑器中，通过点击鼠标右键，弹出右键菜单组件，并在选中其中的子选项后，实现诸如复制、粘贴、全选等功能，从而提高编辑效率。

Description

一种代码编辑器右键菜单功能实现方法及电子设备

技术领域

本发明涉及计算机技术领域，尤其涉及一种代码编辑器右键菜单功能实现方法及电子设备。

背景技术

集成开发环境(ide，Integrated Development Environment)是用于提供程序开发环境的应用程序，一般包括代码编辑器、编译器、调试器和图形用户界面等工具。其集成了代码编写功能、分析功能、编译功能、调试功能等一体化的开发软件服务套。所有具备这一特性的软件或者软件套(组)都可以叫集成开发环境。如微软的Visual Studio系列，Borland的C++Builder、Delphi系列等。该程序可以独立运行，也可以和其它程序并用。IDE多被用于开发HTML应用软件。例如，许多人在设计网站时使用IDE(如HomeSite、DreamWeaver等)，因为很多项任务会自动生成。

虽然，代码编辑器具有代码编辑的功能，例如可进行代码编辑转换等操作。但现有的代码编辑器还不具有右键菜单功能，导致操作时效率不高。

因此，现有技术还有待于改进和发展。

发明内容

鉴于上述现有技术的不足，本发明的目的在于提供一种代码编辑器右键菜单功能实现方法及电子设备，旨在解决现有的代码编辑器还不具有右键菜单功能，导致操作时效率不高的问题。

本发明的技术方案如下：

一种代码编辑器右键菜单功能实现方法，其中，包括步骤：

预先在第三方库中绑定鼠标右击事件；

在所述鼠标右击事件中绑定渲染函数；

当接收到鼠标右击事件时，通过所述渲染函数分配一行为；

通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。

所述的代码编辑器右键菜单功能实现方法，其中，所述通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件的步骤之后包括：

当接收到对右键菜单组件中的子选项的点击指令时，触发点击事件，实现相应功能。

所述的代码编辑器右键菜单功能实现方法，其中，所述通过所述行为触发改变全局变量中的属性的步骤具体包括：

通过传递一布尔值参数触发改变全局变量中的属性。

所述的代码编辑器右键菜单功能实现方法，其中，所述预先在第三方库中绑定鼠标右击事件的步骤具体包括：

预先在右键菜单组件的子选项中绑定第三方库本身的功能。

所述的代码编辑器右键菜单功能实现方法，其中，所述当接收到对右键菜单组件中的子选项的点击指令时，触发点击事件，实现相应功能的步骤之后还包括：

当切换代码编辑器的页面时，记录代码编辑器当前页面的编辑状态，并将所述编辑状态传入至全局变量中。

所述的代码编辑器右键菜单功能实现方法，其中，所述将所述编辑状态传入至全局变量中的步骤之后还包括：

刷新当前页面的编辑状态。

所述的代码编辑器右键菜单功能实现方法，其中，所述右键菜单组件的子选项包括复制、粘贴、全选、撤销和重做。

一种电子设备，其中，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

预先在第三方库中绑定鼠标右击事件；

在所述鼠标右击事件中绑定渲染函数；

当接收到鼠标右击事件时，通过所述渲染函数分配一行为；

通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。

一种非易失性计算机可读存储介质，其中，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的代码编辑器右键菜单功能实现方法。

一种计算机程序产品，其中，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的代码编辑器右键菜单功能实现方法。

有益效果：通过本发明，用户可在代码编辑器中，通过点击鼠标右键，弹出右键菜单组件，并在选中其中的子选项后，实现诸如复制、粘贴、全选等功能，从而提高编辑效率。

附图说明

图1为本发明一种代码编辑器右键菜单功能实现方法较佳实施例的流程示意图。

图2为本发明一种电子设备较佳实施例的结构框图。

具体实施方式

本发明提供一种代码编辑器右键菜单功能实现方法及电子设备，为使本发明的目的、技术方案及效果更加清楚、明确，以下对本发明进一步详细说明。应当理解，此处所描述的具体实施例仅仅用以解释本发明，并不用于限定本发明。

请参阅图1，图1为本发明一种代码编辑器右键菜单功能实现方法较佳实施例的流程图，如图所示，其包括步骤：

S1、预先在第三方库中绑定鼠标右击事件；

S2、在所述鼠标右击事件中绑定渲染函数；

S3、当接收到鼠标右击事件时，通过所述渲染函数分配一行为；

S4、通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。

通过本发明，用户可在代码编辑器中，通过点击鼠标右键，弹出右键菜单组件，并在选中其中的子选项后，实现诸如复制、粘贴、全选等功能，从而提高编辑效率。

其中，在所述步骤S1中，预先在第三方库中绑定鼠标右击事件。

本发明的第三方库可以是ace第三方库，ace是一个开源的、独立的、基于浏览器的代码编辑器，可以嵌入到任何web页面或JavaScript应用程序中。ace支持超过60种语言语法高亮，并能够处理代码多达400万行的大型文档。ace在性能和功能上可以媲美本地代码编辑器(如Sublime Text、TextMate和Vim等)。ace是Mozilla Skywriter(以前称为Bespin)项目的继任者，并作为Cloud9的主要在线编辑器。ace作为一个成熟的第三方库，提供了强大的编辑器组件。但ace本身并不具备右键菜单功能，而一个成熟的ide往往有一些快捷操纵是需要通过右击调出菜单，菜单提供常用的快捷功能，供用户去使用的。本发明要实现的是，在ace本身的基础上，扩展出该功能。

具体地，在第三方库上绑定mousedown事件。其中的mousedown事件即为鼠标点击事件，本发明具体的是在接收到鼠标点击事件时，先判断是否为鼠标右击操作，若是则执行后续操作，所以实质上是绑定鼠标右击事件。当鼠标指针移动到元素上方，并按下鼠标按键时，会发生mousedown事件。与click事件不同，mousedown事件仅需要按键被按下，而不需要松开即可发生。mousedown()方法触发mousedown事件，或规定当发生mousedown事件时运行的函数。

在所述步骤S2中，在所述鼠标右击事件中绑定渲染函数。

渲染函数作用是分配(dispatch)一个行为(action)，从而全局变量中的属性，以动态渲染出右键菜单组件。关于该渲染函数的作用在后续步骤中进行详述。

在所述步骤S3中，当接收到鼠标右击事件时，通过所述渲染函数分配一行为。

在所述步骤S4中，通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。也就是说，通过redux等改变props，动态渲染出原先编写好的右键菜单组件。其中，redux由Dan Abramov在2015年创建的科技术语。是受2014年Facebook的Flux架构以及函数式编程语言Elm启发。很快，redux因其简单易学体积小在短时间内成为最热门的前端架构。redux对于JavaScript应用而言是一个可预测状态的容器。换言之，它是一个应用数据流框架，而不是传统的像underscore.js或者AngularJs那样的库或者框架。redux最主要是用作应用状态的管理。简言之，redux用一个单独的常量状态树(对象)保存这一整个应用的状态，这个对象不能直接被改变。当一些数据变化了，一个新的对象就会被创建(使用actions和reducers)。选项props是组件中非常重要的一个选项。在Vue中，父子组件的关系可以总结为props down,events up。父组件通过props向下传递数据给子组件，子组件通过events给父组件发送消息。

进一步，所述通过所述行为触发改变全局变量中的属性的步骤具体包括：

通过传递一布尔值参数触发改变全局变量中的属性。

所述行为会传递一个布尔值参数should_render_menu(该参数名为自定义)改变全局变量中的属性。其中的全局变量即为store，其中的属性即指state。

所述行为本质就是个函数，该函数的作用就是用来改变store中的state的值。所述store也只是个全局变量，拥有多个属性(即state)。

Vuex提供一个仓库，仓库里面放了很多对象。其中state就是数据源存放地，对应于与一般Vue对象里面的data。state里面存放的数据是响应式的，Vue组件从store中读取数据，若是store中的数据发生改变，依赖这个数据的组件也会发生更新。(这里“状态”＝“数据”)，也就是是说数据和视图是同步的。

通过所述should_render_menu动态渲染出原先编写好的右键菜单的组件。即：

should_render_menu

menu组件：undefined

进一步，所述通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件的步骤之后包括：当接收到对右键菜单组件中的子选项的点击指令时，触发点击事件，实现相应功能。

在渲染出右键菜单组件后，可查看到右键菜单组件的各个子选项，当对所述子选项进行点击时，则触发点击事件(鼠标点击事件)，从而实现相应的功能。

进一步，所述预先在第三方库中绑定鼠标右击事件的步骤具体包括：

预先在右键菜单组件的子选项中绑定第三方库本身的功能。

右键菜单的功能可以绑定第三方库本身的功能，例如撤销和重做等。即点击渲染出的右键菜单组件中的子选项，触发点击事件，在点击实现中实现具体功能。例如点击复制子选项，则触发on_click_copy_item(该函数名可自定义),on_click_copy_item的具体实现可以为：

editor.execCommand(editor.commands.byName.copy)。

需注意的是，在electron(前端桌面开发程序)下面实现复制粘贴功能，可以借助electron本身的clipboard来配合使用的。

例如用户点击复制的时候，调用ace自身的command--copy，然后将该文本通过clipboard写入到***中。

这样实现的复制粘贴功能，会与***本身的复制粘贴表现是一致的。脱离代码编辑器之外的文本输入时也能够读到复制粘贴的内容。

进一步，所述当接收到对右键菜单组件中的子选项的点击指令时，触发点击事件，实现相应功能的步骤之后还包括：

当切换代码编辑器的页面时，记录代码编辑器当前页面的编辑状态，并将所述编辑状态传入至全局变量中。

这样，可以保证代码编辑器各个页面的编辑状态相互独立，互不影响。也就是说，切换页面时，不影响当前页面的编辑状态。

进一步，所述将所述编辑状态传入至全局变量中的步骤之后还包括：

刷新当前页面的编辑状态，以便使各个页面及时切换响应。

进一步，所述右键菜单组件的子选项包括复制、粘贴、全选、撤销和重做。

在代码编辑器中，用户在编辑面板下通过点击鼠标右键，渲染出右键菜单组件时，可选中其中的子选项，例如复制、粘贴、全选、撤销和重做等，从而在当前页面下实现该功能，并且不影响其他页面的编辑状态。

本发明基于js编写，扩展了第三方库的基础功能，提供右键菜单机制。并且该状态是基于多页面区分的，每个页面下的右键菜单下的编辑功能都是互不干扰的。

本发明还提供一种电子设备10，如图2所示，其包括：

处理器110，适于实现各指令，以及

存储设备120，适于存储多条指令，所述指令适于由处理器110加载并执行：

预先在第三方库中绑定鼠标右击事件；

在所述鼠标右击事件中绑定渲染函数；

当接收到鼠标右击事件时，通过所述渲染函数分配一行为；

通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。

所述处理器110可以为通用处理器、数字信号处理器(DSP)、专用集成电路(ASIC)、现场可编程门阵列(FPGA)、单片机、ARM(Acorn RISC Machine)或其它可编程逻辑器件、分立门或晶体管逻辑、分立的硬件组件或者这些部件的任何组合。还有，处理器还可以是任何传统处理器、微处理器或状态机。处理器也可以被实现为计算设备的组合，例如，DSP和微处理器的组合、多个微处理器、一个或多个微处理器结合DSP核、任何其它这种配置。

存储设备120作为一种非易失性计算机可读存储介质，可用于存储非易失性软件程序、非易失性计算机可执行程序以及模块，如本发明实施例中的代码编辑器右键菜单功能实现方法对应的程序指令。处理器通过运行存储在存储设备中的非易失性软件程序、指令以及单元，从而执行代码编辑器右键菜单功能实现方法的各种功能应用以及数据处理，即实现上述方法实施例。

关于上述电子设备10的具体技术细节在前面的方法中已有详述，故不再赘述。

本发明还提供一种非易失性计算机可读存储介质，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行所述的代码编辑器右键菜单功能实现方法。

本发明还提供一种计算机程序产品，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行所述的代码编辑器右键菜单功能实现方法。

应当理解的是，本发明的应用不限于上述的举例，对本领域普通技术人员来说，可以根据上述说明加以改进或变换，所有这些改进和变换都应属于本发明所附权利要求的保护范围。

Claims (10)

1.一种代码编辑器右键菜单功能实现方法，其特征在于，包括步骤：

预先在第三方库中绑定鼠标右击事件；

在所述鼠标右击事件中绑定渲染函数；

当接收到鼠标右击事件时，通过所述渲染函数分配一行为；

通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。

2.根据权利要求1所述的代码编辑器右键菜单功能实现方法，其特征在于，所述通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件的步骤之后包括：

当接收到对右键菜单组件中的子选项的点击指令时，触发点击事件，实现相应功能。

3.根据权利要求1所述的代码编辑器右键菜单功能实现方法，其特征在于，所述通过所述行为触发改变全局变量中的属性的步骤具体包括：

通过传递一布尔值参数触发改变全局变量中的属性。

4.根据权利要求1所述的代码编辑器右键菜单功能实现方法，其特征在于，所述预先在第三方库中绑定鼠标右击事件的步骤具体包括：

预先在右键菜单组件的子选项中绑定第三方库本身的功能。

5.根据权利要求2所述的代码编辑器右键菜单功能实现方法，其特征在于，所述当接收到对右键菜单组件中的子选项的点击指令时，触发点击事件，实现相应功能的步骤之后还包括：

当切换代码编辑器的页面时，记录代码编辑器当前页面的编辑状态，并将所述编辑状态传入至全局变量中。

6.根据权利要求5所述的代码编辑器右键菜单功能实现方法，其特征在于，所述将所述编辑状态传入至全局变量中的步骤之后还包括：

刷新当前页面的编辑状态。

7.根据权利要求1所述的代码编辑器右键菜单功能实现方法，其特征在于，所述右键菜单组件的子选项包括复制、粘贴、全选、撤销和重做。

8.一种电子设备，其特征在于，包括：

处理器，适于实现各指令，以及

存储设备，适于存储多条指令，所述指令适于由处理器加载并执行：

预先在第三方库中绑定鼠标右击事件；

在所述鼠标右击事件中绑定渲染函数；

当接收到鼠标右击事件时，通过所述渲染函数分配一行为；

通过所述行为触发改变全局变量中的属性，以动态渲染出右键菜单组件。

9.一种非易失性计算机可读存储介质，其特征在于，所述非易失性计算机可读存储介质存储有计算机可执行指令，该计算机可执行指令被一个或多个处理器执行时，可使得所述一个或多个处理器执行权利要求1-7任一项所述的代码编辑器右键菜单功能实现方法。

10.一种计算机程序产品，其特征在于，计算机程序产品包括存储在非易失性计算机可读存储介质上的计算机程序，计算机程序包括程序指令，当程序指令被处理器执行时，使所述处理器执行权利要求1-7任一项所述的代码编辑器右键菜单功能实现方法。