背景
Monaco 编辑器是目前 VS code 代码编辑器的开源内核，在功能上基本碾压同类的其他代码编辑器，同时得益于丰富的插件体系，目前很多市面上在线 IDE 工具也都是基于此做了二次开发，包括 Coding 的 Cloud Studio 产品，以及 LeetCode 里的代码编辑器都是 Monaco，影响力可见一斑。
对于开源方案，大多数的情况下我们都需要二次修改以适配最终的业务产品形态，因此我们也有修改编辑器主题的诉求。
思路
通过代码捞出所有的配置，自己一个个去实验。
Playground：https://microsoft.github.io/monaco-editor/playground.html
代码语言：javascript复制const colors = _amdLoaderGlobal.require('vs/platform/registry/common/platform').Registry.data.get('base.contributions.colors').colorSchema.properties;
monaco.editor.create(document.getElementById("container"), {
value: JSON.stringify(colors, null, 2),
language: "json"
});其次参照文档，寻求完整的解释含义，不要只看 StackOverflow 上或者网络上其他地方的评论给出的配置参数，有些是有使用前提的，比如鼠标滚轮事件，默认情况下 Monaco 在代码编辑器容器里不对该事件做冒泡，也就导致当你在编辑器里用鼠标滚轮滚动到底部时，也无法触发页面的滚动，因此需要将该配置设置为 false 。
Optional alwaysConsumeMouseWheel?: boolean Always consume mouse wheel events (always call preventDefault() and stopPropagation() on the browser events). Defaults to true. NOTE: This option cannot be updated using updateOptions() https://microsoft.github.io/monaco-editor/typedoc/interfaces/editor.IEditorScrollbarOptions.html#alwaysConsumeMouseWheel
所以这个配置只能在初始化编辑器的阶段就设置。不看文档自己瞎折腾必定失败。
React 应用
由于前端目前都在使用 Vue 或者 React，图省事的话，我们可以使用第三方的 @monaco-editor/react 库就不需要关心配置相关的事情，开箱即用，底层也是依赖了微软的 monaco-editor ，在业务层我们只需要关心 @monaco-editor/react 提供的 API 即可。
这里给出一个实际应用，我们所关心的 API 基本上就这几个，剩下的可以参照文档。
代码语言：javascript复制<Editor
height="250px"
defaultLanguage="sql"
options={{ // 初始化时就需要设置的配置放在这里
scrollbar: {
useShadows: false,
alwaysConsumeMouseWheel: false
}
}}
theme="editorTheme" // 自定义主题
beforeMount={handleEditorBeforeMount} // 编辑器加载前
onMount={handleEditorDidMount} // 编辑器加载后
value={content} // 编辑器内容文本
onChange={handleEditorChange} // 监听内容变化
/>TODO
- 后续给一份配置好的主题参数
- 加载优化方案
