在monaco编辑器中已经有了很多指令，这些指令极大地方便了我们的编辑工作，比如用于查询的
Ctrl+F
有时为了满足业务的需要我们需要自己添加一些指令，比如在按下
End
键，弹出提示编辑器的一些统计信息。
处理添加自定义指令外，我们有时也需要在编辑器中添加一些自定义的菜单项，这些菜单项的专业术语叫做
Action
，可以在用户点击 鼠标右键弹出显示。如下图
下面就让我们来看一下如何实现这两个自定义的功能吧。
具体的实现比较简单，核心是二个函数，
添加自定义命令
editor.addCommand()
添加菜单项
editor.addAction()
下面一起看一下如何使用这两个参数吧。
要添加自定义指令，需要先创建一个上下文key，方法为
editor.createContextKey()
传入两个参数，第一个就是key的名称，这里也可成为指令的名称，第二个参数可以是一个布尔类型，表示key的值
我们创建一个
var fizzCommand = editor.createContextKey('fizzCommand', true)
创建完key后，我们再将其与对应的组合键绑定到一起，这样当
在
monaco
编辑器
中，有很多事件，鼠标事件，滚动条事件，按键事件。鼠标事件中又区分点击，悬浮，移动事件，而点击事件又区分点击区域。本篇文章就来汇总地讲解一下
Monaco
编辑器
汇总事件的用法以及相关API。
npm install ngx-
monaco
-
editor
--save
对于角度版本6，请使用v6.xx
npm install ngx-
monaco
-
editor
@6.0.0 --save
将glob
添加
到.angular-cli.json模式中的资产.angular-cli.json projects.[project-name].architect.build （以使
monaco
-
editor
lib可用于该应用程序）：
"options" : {
"assets" : [
{ "glob" : "**/*" ,
介绍vue2、vue3中使用
monaco
编辑器
，但是vue2存在未解决的问题。博主建议使用vue3搭配
monaco
编辑器
，vue2建议搭配ace
编辑器
。如果大家vue2成功使用
monaco
也可告诉我，感谢撒花~~ 其中部分参考其他博主
由于
Monaco
的文档是使用TS的类型声明来生成的，在生成后必定会有很多属性的描述让人摸不到头脑，并且这些文档又是会混入一些VS Code才能用到的api。在看文档时，读者有时会既不知道这个属性具体影响的地方，也不清楚每个配置值有什么不同。有时一些属性只表明了该属性的值是一个string类型，至于值从哪里来，却没有解释。而今天的文章，就是由这样一个迷惑属性而来的。
为什么要写这篇文章？最近开发了一个简单的在线代码
编辑器
，基于
Monaco
Editor
实现
，没有了解过
Monaco
的人可能不知道，我们常用的 VS Code 也是基于它
实现
的~回到正题，
Monaco
Editor
有一份完整的官方文档，那为什么还要写这个文章？因为官方文档是在是太难用了，api 难找不说，找到了也是看得云里雾里，可能是我查阅的姿势不对吧，欢迎有文档使用经验的朋友在评论中指教...
写在前面 欢迎关注公众号：java开发高级进阶, 有不会的可以直接公众号留言提问
monaco
-
editor
不提供全局搜索，只提供单个文件内的搜索，那么如何
实现
全局搜索呢？
环境：Nodejs + React + Dva +
monaco
-
editor
+ react-
monaco
-
editor
+ antd
一、绑定快捷键
调用
editor
.addCommand方法绑定快捷键，通过
monaco
....
npm i @vanillawc/wc-
monaco
-
editor
从NPM导入
< script type =" module " src =" node_modules/@vanillawc/wc-
monaco
-
editor
/index.js " > </ script >
从CDN导入
< script type =" module " src =" https://cdn.jsdelivr.net/gh/vanillawc/wc-
monaco
-
editor
@1/index.js " > </ script >
本篇文章讲解一下创建
Monaco
编辑器
时所有完整配置，算是一个比较浅显的入门文章。这里结合实际的项目业务场景介绍一些常用的，有可能修改的默认配置参数。
Monaco
已经默认了很多配置参数的值，而这些默认值应该适合大多数场景。那么多属性 不是一下子能给记下来的，完整地翻译下来也只是有个印象而已。又一个很大的好处就是可以用中文搜索啦。哈哈哈。。。。
