Angular项目中Monaco Editor 0.10.0代码折叠/展开按钮实现方案

嘿，刚好我之前在Angular项目里用Monaco 0.10.0做过类似的需求，给你一套落地的实现方案，步骤很清晰：

1. 先在组件模板里加控制按钮 #

直接在你的编辑器容器旁边放两个按钮，绑定点击事件就行：

<div style="margin-bottom: 10px;">
  <button (click)="foldAllJson()">折叠全部</button>
  <button (click)="unfoldAllJson()" style="margin-left: 8px;">展开全部</button>
</div>
<div #editorContainer style="height: 500px; border: 1px solid #ccc;"></div>

2. 在组件类里搞定Editor实例和核心方法 #

首先你得确保已经在ngAfterViewInit里初始化了Monaco Editor，并且把实例存下来——毕竟要调用它的折叠API。代码大概是这样：

import { Component, ViewChild, ElementRef, AfterViewInit } from '@angular/core';
// 这里根据你的项目引入Monaco：如果是npm包引入就用import * as monaco from 'monaco-editor';
// 要是CDN引入的话，直接声明即可
declare var monaco: any;

@Component({
  selector: 'app-json-editor',
  templateUrl: './json-editor.component.html',
  styleUrls: ['./json-editor.component.css']
})
export class JsonEditorComponent implements AfterViewInit {
  @ViewChild('editorContainer') editorContainer!: ElementRef;
  private editorInstance: any; // 存储Editor实例，避免重复获取

  ngAfterViewInit(): void {
    // 初始化Editor，加载你的JSON内容，注意folding要设为true（你已经开启了，这里再确认下）
    this.editorInstance = monaco.editor.create(this.editorContainer.nativeElement, {
      value: '{"user": {"name": "Alice", "age": 30}, "settings": {"theme": "dark", "notifications": true}}',
      language: 'json',
      folding: true,
      // 其他你需要的配置，比如字体大小、自动换行等
    });
  }

  // 折叠所有可折叠的JSON节点
  foldAllJson(): void {
    if (!this.editorInstance) return; // 防止初始化前点击按钮报错
    // Monaco 0.10.0已经内置了foldAll动作，直接调用就行
    this.editorInstance.getAction('editor.foldAll').run();
  }

  // 展开所有折叠的节点
  unfoldAllJson(): void {
    if (!this.editorInstance) return;
    this.editorInstance.getAction('editor.unfoldAll').run();
  }
}

3. 针对0.10.0版本的注意点 #

• 这个版本的Monaco已经自带了editor.foldAll和editor.unfoldAll内置动作，不需要你手动遍历折叠区域，直接调用就能搞定JSON的折叠/展开。
• 一定要先检查editorInstance是否存在，不然页面刚加载完还没初始化Editor就点按钮会报错。
• 如果你的JSON是动态加载的（比如从后端接口获取），只要Editor实例已经创建，更新内容后依然可以正常调用这两个方法，完全不影响。

额外小技巧：只折叠顶级JSON节点（可选） #

如果你不想把所有层级都折叠，只想折叠顶级的对象/数组，可以用更精细的API来筛选折叠区域：

foldTopLevelOnly(): void {
  if (!this.editorInstance) return;
  const model = this.editorInstance.getModel();
  // 获取所有可折叠的区域
  const allRegions = model.getFoldingRegions();
  // 筛选出顶级区域（JSON的顶级节点一般从第2行开始，因为第一行是{或[）
  const topLevelRegions = allRegions.filter(region => region.startLineNumber === 2);
  // 逐个折叠
  topLevelRegions.forEach(region => {
    this.editorInstance.fold(region);
  });
}

这样就完美实现按钮控制JSON的折叠和展开啦，我在0.10.0版本上亲测过没问题~

内容的提问来源于stack exchange，提问作者Vikram Jain