Monaco编辑器在Angular中的使用详解与实践

Monaco Editor 在 Angular 项目中的集成实践

近期在 Angular 项目开发中，我们使用了 Monaco Editor 代码编辑器，并整理了接入方式。本文将重点介绍关键点与常用 API，帮助开发者快速上手，避免常见陷阱。

安装依赖

如果项目基于 Angular 12 及更早版本，选择 monaco-editor 配合 ngx-monaco-editor 完全可行。但升级到更高 Angular 版本后，使用 npm 安装 ngx-monaco-editor 会报错——原因在于原作者已停止维护，支持仅停留在 Angular 12。

虽然可以通过 --force 或 --legacy-peer-deps 强制安装，但为彻底消除潜在风险，我们在原作者基础上将框架支持提升至 Angular 14，并持续进行维护更新。

推荐使用持续维护的 @rickzhou/ngx-monaco-editor

如果不希望依赖外部包，可直接将以下源文件复制到本地项目中使用：

• base-editor.ts（引入 monaco-editor）
• config.ts
• diff-editor.component.ts
• editor.component.ts
• editor.module.ts
• types.ts

只需将 lib 目录下的这六个文件复制出来，作为项目中的一个 Module 正常引用即可。

使用方式

所有 API 均可在 editor.api.d.ts 中查阅，下面仅记录最常用的几个功能。

1. 配置编辑器选项

export const READ_EDITOR_OPTIONS: editor.IEditorOptions = {
  readOnly: true,
  automaticLayout: false,
  minimap: { enabled: false },
  renderFinalNewline: false,
  scrollbar: { vertical: 'visible' },
  mouseWheelZoom: true,
  contextmenu: false,
  fontSize: 16,
  scrollBeyondLastLine: false,
  smoothScrolling: true,
  cursorWidth: 0,
  renderValidationDecorations: 'off',
  colorDecorators: false,
  hideCursorInOverviewRuler: true,
  overviewRulerLanes: 0,
  overviewRulerBorder: false,
};

2. 获取编辑器实例

public initViewEditor(editor: editor.ICodeEditor): void {
  this.editor = editor;
}

3. 获取当前光标位置

editor.getPosition()

4. 获取鼠标选中的文本

editor.getModel().getValueInRange(editor.getSelection());

5. 修改光标位置

editor.setPosition({
  column: 1,
  lineNumber: 1,
});

6. 滚动指定行至可视区中央

editor.revealLineInCenter(1);

7. 绑定事件

editor.onMouseDown(event => {
  // do something
});
editor.onKeyDown(event => {
  // do something
});

8. 保存与恢复视图快照

const snapshot = editor.saveViewState();
editor.restoreViewState(snapshot);

9. 阻止特定事件（例如搜索快捷键）

function isMac() {
  return /macintosh|mac os x/i.test(navigator.userAgent);
}
editor.onKeyDown(event => {
  if (
    (isMac() && event.browserEvent.key === 'f' && event.metaKey) ||
    (!isMac() && event.browserEvent.key === 'f' && event.ctrlKey)
  ) {
    event.preventDefault();
    event.stopPropagation();
  }
});

以上便是 Monaco Editor 在 Angular 中的基本用法。实际项目中可根据场景灵活组合这些 API，例如动态切换语言、绑定快捷键、同步滚动等，操作并不复杂。只要理清了编辑器实例的获取方式，后续扩展会非常顺畅。