Angular 18集成Ace Editor：setBehavioursEnabled无效，自动括号配对失效求助

问题描述 #

在Angular 18中集成Ace Editor时，已调用setBehavioursEnabled(true)且验证返回true，但自动括号配对、自动缩进等核心功能仍未生效。相关代码如下：

import { AfterViewInit, Component, ElementRef, ViewChild } from "@angular/core";
import * as ace from "ace-builds";

@Component({
  selector: "app-ace-editor",
  standalone: true,
  templateUrl:'./ace-component.html',
  styles: [
    `
      .app-ace-editor {
        border: 2px solid #f8f9fa;
        box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
        width: 100%;
        height: 250px;
      }
      .toolbar {
        margin-bottom: 10px;
      }
      .toolbar button,
      .toolbar select {
        margin-right: 5px;
      }
    `,
  ],
})
export class AceEditorComponent implements AfterViewInit {
  @ViewChild("editor") private editor: ElementRef<HTMLElement>;
  private aceEditor: ace.Ace.Editor;

  ngAfterViewInit(): void {
    ace.config.set("fontSize", "14px");
    this.aceEditor = ace.edit(this.editor.nativeElement);
    this.aceEditor.setBehavioursEnabled(true);
    this.aceEditor.setTheme("ace/theme/gruvbox_dark_hard");
    this.aceEditor.session.setMode("ace/mode/html");
  }

  saveContent(): void {
    const content = this.aceEditor.getValue();
    console.log("Saved content:", content);
  }

  resetContent(): void {
    this.aceEditor.setValue("Is this ok", -1);
  }

  changeTheme(event: Event): void {
    const theme = (event.target as HTMLSelectElement).value;
    this.aceEditor.setTheme(theme);
  }

  changeMode(event: Event): void {
    const mode = (event.target as HTMLSelectElement).value;
    this.aceEditor.session.setMode(mode);
  }
}

排查与修复方案 #

1. 加载Ace Editor的行为与缩进扩展模块 #

Ace Editor的自动括号配对、自动缩进功能依赖独立的扩展模块，默认核心包未包含，需手动导入：

// 在组件顶部添加导入
import 'ace-builds/src-noconflict/behaviour/html'; // HTML模式专属括号配对行为
import 'ace-builds/src-noconflict/ext-beautify'; // 自动缩进与代码格式化支持

若需支持多语言模式，可导入通用行为模块：

import 'ace-builds/src-noconflict/behaviour';

2. 显式配置缩进参数 #

在ngAfterViewInit中补充缩进相关配置，确保自动缩进功能生效：

ngAfterViewInit(): void {
  ace.config.set("fontSize", "14px");
  this.aceEditor = ace.edit(this.editor.nativeElement);
  
  // 配置缩进相关参数
  this.aceEditor.session.setTabSize(2); // 设置制表符宽度
  this.aceEditor.session.setUseSoftTabs(true); // 用空格替代制表符
  this.aceEditor.session.setIndentationGuides(true); // 显示缩进参考线
  this.aceEditor.setDisplayIndentGuides(true);
  
  this.aceEditor.setTheme("ace/theme/gruvbox_dark_hard");
  this.aceEditor.session.setMode("ace/mode/html");
  this.aceEditor.setBehavioursEnabled(true); // 移至模式设置之后
}

3. 验证Mode文件是否加载成功 #

自动括号配对是模式依赖功能，需确保对应Mode文件已正确加载：

• 检查浏览器控制台是否有Mode加载失败的404错误
• 若路径未自动加载，手动导入对应Mode：

  import 'ace-builds/src-noconflict/mode-html';
  

4. 调整初始化顺序 #

将setBehavioursEnabled(true)移至模式设置之后，确保行为模块能正确关联当前语法模式。

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