Monaco Editor教程（八）：实现添加自定义命令，添加自定义菜单action功能

2024-05-16 17:21:29

背景

在monaco编辑器中已经有了很多指令，这些指令极大地方便了我们的编辑工作，比如用于查询的Ctrl+F
有时为了满足业务的需要我们需要自己添加一些指令，比如在按下End键，弹出提示编辑器的一些统计信息。

处理添加自定义指令外，我们有时也需要在编辑器中添加一些自定义的菜单项，这些菜单项的专业术语叫做Action，可以在用户点击鼠标右键弹出显示。如下图

下面就让我们来看一下如何实现这两个自定义的功能吧。

实现

具体的实现比较简单，核心是二个函数，
添加自定义命令 editor.addCommand()
添加菜单项 editor.addAction()

下面一起看一下如何使用这两个参数吧。

添加指令

要添加自定义指令，需要先创建一个上下文key，方法为editor.createContextKey()
传入两个参数，第一个就是key的名称，这里也可成为指令的名称，第二个参数可以是一个布尔类型，表示key的值
我们创建一个
var fizzCommand = editor.createContextKey('fizzCommand', true)

创建完key后，我们再将其与对应的组合键绑定到一起，这样当

Monaco Editor教程（八）：实现添加自定义命令，添加自定义菜单action功能相关推荐

Monaco Editor教程（七）：实现版本对比功能
背景在具有版本控制功能的WEB IDE 中,提交代码时,会有一个版本对比的功能,你可以点击每一个修改的文件,然后对比基础版本与当前修改的版本,被修改的地方会有颜色区分.这对于一个修改大文件,修改内容 ...
Monaco Editor教程（十）：如何系统学习monaco editor
背景 monaco editor教程已经发布了九篇了,根据文章的数据来看,阅读量还不错,这说明学习monaco 的开发者还是不少的,之前讲解的知识点都是比较零碎的,你根据之前的几篇文章,也能做出一个简 ...
Monaco Editor教程（十八）：使用api来完成某些键盘操作，格式化，查找，显示右侧菜单等。
背景在一般的Web IDE中,我们需要将经常用到的一些操作放到顶部操作栏里,类似语雀的文档编辑. 代码编辑器,一般也会放一些查找,格式化,撤销,恢复.有些人喜欢用快捷键来进行这些操作,但由于mona ...
Monaco Editor教程（二十）：在编辑器的某个特定位置插入自定义的dom内容，图片，表单，表格，视频
前言哇咔咔,这是我的第20篇Monaco教程,写完这一篇会暂时休息一段时间,练练字,存存稿,读读书,顺便修修文章. 目前全网成系统的monaco中文专栏应该只有我这一个,欢迎评论区打脸.自结束了Gi ...
Monaco Editor教程（一）：开源项目 monaco-editor 开启本地开发环境
最近monaco editor的官网大改版,由原来的jquery,改成react.版本也从我之前的0.34.几个月一路做火箭,升到了v0.36.1 专栏里有些官网链接无法查阅了,但读者都可以根据链接中 ...
Monaco Editor教程（五）：实现同时多文件编辑，tab切换
背景上一篇我们讲解了如何设置编辑器的值,获取编辑器的值,以及监听编辑器的内容修改.这些功能对于基础的单文件修改,一次只修改一个文件的业务场景比较友好.但如果是复杂的场景,比如WEB IDE,同时打开 ...
Monaco Editor教程（六）：切换主题，及自定义主题功能的实现
背景在实现一个WEB IDE时有些用户需要定制主题的功能,比如白色主题切换为黑色,这样会看起来酷一些. monaco的默认主题效果黑色主题效果下面我们一起看一下如何实现切换主题切换主题详解切 ...
Monaco Editor教程（九）：聚焦到编辑器的指定位置，某行，某列
背景在GitLab查看一个文件时,我们可以点击行号,从而获得一个锚点,如下图, 点击后在url上会加上这个一个标识 #L18 用户可以分享该链接,其他用户通过该链接进入页面后,浏览器会自动滑动到用户 ...
Monaco Editor教程（十六）：缩略图minimap的配置详解
背景缩略图 (Minimap) 是一种常见的用于快速预览和探索的工具,可作为导航辅助用户探索大规模图. 在大文件的阅读和编辑中,能够起到很好的导航作用,并且缩略图能够显示文件结构的大致轮廓,使开发人 ...

最新文章

热门文章