前言：亲爱的小伙伴们，又见面了！上一篇文章我们一起学习了 Monaco Editor 的几个功能，设置内容、多文件编辑、自定义主题；下面让我们继续Monaco Editor的旅程吧！
前情提要：
上一篇文章我介绍了Monaco Editor的几个功能，涉及到的方法分别是：
🧜🏼♀️ 获取 model editor.getModel()
🧜🏼♀️ 获取内容 editor.getValue()
🧜🏼♀️ 设置内容editor.setValue()
🧜🏼♀️ 监听内容变化 editor.onDidChangeContent()
🧜🏼♀️ 创建 model monaco.editor.createModel(内容, 语言)
🧜🏼♀️ 设置 model editor.setModel(newModel)
🧜🏼♀️ 获取 model 的状态 editor.saveViewState()
🧜🏼♀️ 设置 model 的状态 editor.restoreViewState(state)
🧜🏼♀️ 编辑器获取焦点 editor.focus()
🧜🏼♀️ 设置 model 的语言 editor.setModelLanguage(model, language)
🧜🏼♀️ 设置主题 monaco.editor.setTheme(themeName)
🧜🏼♀️ 定义主题 monaco.editor.defineTheme(主题名, 配置对象)
一、版本对比
playground 路由页面这几个都是版本对比的示例
在我的日常工作中，提交的代码需要提交 code review，然后让别的同事进行检查，不知道大家和我的工作流程一不一样呢？此时就用到 git 中的代码对比的功能，它会清晰的标出来新增代码、删除代码、修改代码。本地项目中给的也有示例哦
真清晰哇！咱们可以直接从右侧的代码区域看到执行的代码
从上面的代码中我们可以看到，创建版本对比编辑器需要三个步骤
① 创建旧代码的 model 和新代码的 model
② 创建 diffEditor
③ 给 diffEditor 配置两个 model
createDiffEditor() 方法的文档地址：
${本地项目根路径}/docs.html#functions/editor.createDiffEditor.html
参数一：编辑器的容器
参数二：编辑器配置对象 IStandaloneDiffEditorConstructionOptions
参数三：重写编辑器行为的服务 IEditorOverrideServices 一般来说也用不到
咱们的编辑器长啥样，关键在于配置对象 IStandaloneDiffEditorConstructionOptions。定义在 node_modules/monaco-editor-core/monaco.d.ts 文件里，然后它继承了好多层🤣
救命啊家人们，怀疑人生了。。我发现源码里注释有一个错误。。
这个属性，注释的最后一句，默认为true。但是经过我实践，其实默认值是 false。。
这个属性是用来检测高对比度主题的，如果 theme 设置成高对比度，autoDetectHighContrast 设置成 true 的话，就会修正高对比度，还是应用这种白底红红绿绿的形式
如果设置成 false ，就会使用高对比度的样式，结果就是下面这样，不太好看
如果不设置的话，也是这样
我查阅了 IStandaloneDiffEditorConstructionOptions 接口里面的属性，写了下面的案例代码，其中有一些设置并没有效果🌚。总之大家参考一下下面的注释出来的含义吧。另外，除了下面注释出来的内容，其他的在创建 普通的编辑器的时候设置的属性，也是可以作为属性传给差异对比编辑器的
require(['vs/editor/editor.main'], function () {
var originalModel = monaco.editor.createModel(
"This line is removed on the right.\njust some text\nabcd\nefgh\nSome more text",
"text/plain"
);
var modifiedModel = monaco.editor.createModel(
"just some text\nabcz\nzzzzefgh\nSome more text.\nThis line is removed on the left.",
"text/plain"
);
var diffEditor = monaco.editor.createDiffEditor(
document.getElementById("container"),
{
theme: 'hc-light',
// 自定修正高对比度
autoDetectHighContrast: true,
// 编辑器为只读形式
readOnly: false,
// 是否允许拖动中间的中轴线改变左右编辑区域的大小
enableSplitViewResizing: true,
// 左侧默认占整体宽度的比例 数字 0-1 之间 默认是 0.5
splitViewDefaultRatio: 0.7,
// 是否并排渲染；如果是false，则会嵌套渲染
renderSideBySide: true,
// 如果 renderSideBySide 设置为true，宽度小于renderSideBySideInlineBreakpoint
// 的时候显示为内嵌模式 但是我测试的并不好使。。。
useInlineViewWhenSpaceIsLimited: true,
renderSideBySideInlineBreakpoint: 1000,
// 计算差异的周期 ms
maxComputationTime: 5000,
// 最大文件 MB
maxFileSize: 50,
// 忽略空格差异
ignoreTrimWhitespace: true,
// 新增和删除的行是否显示加号和减号
renderIndicators: false,
// 在每一行的左侧显示回滚的小图标，没看到哇？
renderMarginRevertIcon: true,
// 展示右上角的预览标尺
renderOverviewRuler: true,
// 原始文本是否可编辑，默认为false
originalEditable: true,
diffCodeLens: true,
}
);
diffEditor.setModel({
original: originalModel,
modified: modifiedModel,
});
});
二、自定义命令和菜单
在 Monaco 中，已经有很多现成的很好用的快捷键，例如 crtl+f 搜索代码。Monaco 其实还提供了接口，允许我们自定义命令。另外右键菜单里面的命令，和快捷键往往都是一对一的关系
右键出来的菜单项的专业术语叫做 Action。
所以我们这一章就来学一学怎么自定义命令以及 Action 菜单项吧！
我们来实现一个简单的命令，alert 弹出一句话
（一）自定义命令
添加自定义命令的方法是 editor.addCommand()
为了方便大家点击链接跳转，以后我就直接贴官网的文档链接啦！
这个方法需要接受一个参数，类型为 ICommandDescriptor。接口也很简单，包含两个属性：
🥗 id 按键的值
🥗 run 事件处理函数
按键的值的定义在枚举值 KeyCode 上定义，在 node_modules/monaco-editor-core/monaco.d.ts 文件里
以 shift 为例子，我们在传递 id 的时候，可以直接传数字 4，但是这就要求我们每次都查阅 KeyCode 的定义，看一下按键对应的数字；更方便的是直接使用 monaco.KeyCode.Shift。但是快捷键可能发生冲突，所以在这里可以使用组合按键，monaco.KeyMod.chord 方法
monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK) 表示组合按键 ctrl + k。需要注意的是，monaco.KeyMod.chord()传进来的第一个按键，必须是 KeyMod 上定义的几个静态常量
export class KeyMod {
static readonly CtrlCmd: number;
static readonly Shift: number;
static readonly Alt: number;
static readonly WinCtrl: number;
static chord(firstPart: number, secondPart: number): number;
}
第二个按键是枚举 KeyCode 中的按键
editor.addCommand(
monaco.KeyMod.chord(monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyK),
function () {
alert(`风遁：螺旋手里剑`);
}
);
按下 ctrl + k
（二）自定义菜单项 Action
playground 路由页面的下面两个选项是官方给出的增加命令和菜单项的示例
添加菜单项使用方法 editor.addAction
有两个方法可以添加 Action，第一个是 monaco.editor.addEditorAction()，给所有的编辑器实例添加 Action；另一个是 editor.addAction() ，editor实例调用 addAction()，只给自己添加就完了
editor.addAction() 接收一个 IActionDescriptor类型 的对象作为参数
具体的含义我都写在代码的注释里啦
我们来创建一个 Action 让小迪实现艺术 💥
editor.addAction({
// 不能重复
id: 'bomb',
// 展示在菜单中的文本
label: 'Didara Bomb',
// 快捷键
keybindings: [
monaco.KeyMod.CtrlCmd | monaco.KeyCode.F10,
// 组合按键 需要 ctrl + d + m
monaco.KeyMod.chord(
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyD,
monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyM
)
],
// 前提条件 String
// 暂时只找到这一个例子，判断编辑器语言是不是 javascript
precondition: "editorLangId == 'javascript'",
// 绑定快捷键的规则
keybindingContext: "editorLangId == 'javascript'",
// 指定操作应显示在上下文菜单的哪个组中 navigation表示默认组
contextMenuGroupId: 'navigation',
// 操作在菜单中的显示顺序
contextMenuOrder: 1.5,
// 操作执行的方法
// @param editor ed.getPosition() 获取焦点坐标
run: function (ed) {
alert("艺术就是💣💣💣💣💥💥💥💥" + ed.getPosition());
}
});
然后我们右键查看已经有了新增加的菜单
点击就让小迪绽放
另外，上面我们还绑定了两种快捷键，一种是 ctrl + f10，一种是 ctrl + d + m
📢📢📢 焦点需要在编辑器内按快捷键才有用哦
三、光标滚动
在 gitlab 中，点击某一行代码的行号的时候，会自动生成一个锚点，并且url中会显示锚点名称。通过这个链接分享出去，别人点击链接进来的时候，代码就会自动滚动到这个锚点处
这一章我们就来实现一下代码滚动的功能
如果要获取光标的位置，可以使用：
model.getPositionAt()
咱们本地项目的 playground 路由里面，有这个滚动功能的示例，并且里面也列举出了所有的关于滚动的方法
editor.revealLine // 编辑器滚动到某一行,只保证出现该行
editor.revealLineInCenter // 编辑器滚动到lineNumber行，并将改行滑动到编辑器垂直中心
editor.revealLines // 滚动到多行
editor.revealLinesInCenter // 滚动到多行中心
editor.revealLinesInCenterIfOutsideViewport // 滚动到多行中心 如果位于视口之外
editor.revealPosition // 滚动到固定的行，列
editor.revealPositionInCenter // 滚动到固定的行，列 中心
editor.revealPositionInCenterIfOutsideViewport // 滚动到固定的行，列 中心 如果位于视口之外
editor.revealRange // 滚动到一定范围，开始行，列，结束行列
editor.revealRangeInCenter // 滚动到一定范围，开始行，列，结束行列 中心点
editor.revealRangeInCenterIfOutsideViewport // 滚动到一定范围，开始行，列，结束行列 中心点 如果位于视口之外
使用的时候看哪一个比较适合酌情选择就好啦！
// 滚动到多少行多少列
// 第一个参数的类型是 IPosition
// IPosition {
// readonly lineNumber: number;
// readonly column: number;
// }
// 第二个参数是滚动的方式 0 表示 smooth 1 表示 Immediate
editor.revealPositionInCenter({ lineNumber: 44, column: 66 }, 0);