如何通过Ctrl+空格键启用/禁用ACE编辑器的自动补全功能？

问题分析 #

• 快捷键触发时会重新调用highlightEditor创建新的编辑器实例，导致原有编辑状态丢失，且逻辑重复。
• 函数内同时设置enableBasicAutocompletion为true和false，这会直接覆盖为关闭状态，无法实现切换效果。

修正方案 #

1. 初始化编辑器并跟踪状态 #

在组件或模块内添加状态变量记录自动补全状态，初始化编辑器只执行一次：

// 新增状态变量，跟踪自动补全是否开启
private isAutocompletionEnabled = true;
private codeEditor: ace.Ace.Editor | null = null;

highlightEditor(codeEditorElmRef) {
  const element = codeEditorElmRef;
  const editorOptions: Partial<ace.Ace.EditorOptions> = {
    highlightActiveLine: true,
    showLineNumbers: true,
    highlightSelectedWord: true,
    fontSize: 12,
    tabSize: 2,
    // 初始化时设置自动补全为开启状态
    enableBasicAutocompletion: this.isAutocompletionEnabled,
    enableSnippets: this.isAutocompletionEnabled,
    enableLiveAutocompletion: this.isAutocompletionEnabled
  };
  // 仅创建一次编辑器实例
  this.codeEditor = ace.edit(element, editorOptions);

  // 绑定快捷键切换命令
  this.codeEditor.commands.addCommand({
    name: 'toggleAutocompletion',
    bindKey: { win: "Ctrl-space", mac: "Cmd-space" },
    exec: () => this.toggleAutocompletion()
  });

  this.codeEditor.editorID = this.codeEditor.id;
  this.codeEditor.resize(true);
  this.aceCodeEditors.push(this.codeEditor);
}

2. 添加状态切换函数 #

单独实现切换逻辑，更新编辑器对应选项：

private toggleAutocompletion() {
  if (!this.codeEditor) return;
  
  // 切换自动补全状态
  this.isAutocompletionEnabled = !this.isAutocompletionEnabled;
  
  // 更新编辑器配置
  this.codeEditor.setOptions({
    enableBasicAutocompletion: this.isAutocompletionEnabled,
    enableSnippets: this.isAutocompletionEnabled,
    enableLiveAutocompletion: this.isAutocompletionEnabled
  });
  
  // 可选：调试用日志
  console.log(`自动补全已${this.isAutocompletionEnabled ? '开启' : '关闭'}`);
}

关键调整点 #

• 用isAutocompletionEnabled持久化状态，避免重复初始化编辑器丢失内容。
• 快捷键命令直接调用切换函数，不再重建编辑器实例。
• 初始化逻辑与切换逻辑分离，代码结构更清晰。

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