如何动态修改monaco-editor实例的使用语言？

前提：你已完成Monaco编辑器初始化，且持有编辑器实例对象（通常命名为editor）。

1. 绑定单选按钮事件 #

给你的「clang」标注的单选按钮绑定点击/change事件回调，原生JS示例如下：

// 替换为你的单选按钮实际DOM选择器
const clangRadio = document.querySelector('input[value="clang"]');
clangRadio.addEventListener('change', function() {
  if (this.checked) {
    // 执行语言切换逻辑
  }
});

如果使用Vue、React等框架，直接在组件内给单选按钮绑定对应的事件回调即可。

2. 调用Monaco API切换语言 #

在事件回调内调用Monaco的语言切换方法即可：

// 方法1：如果直接用默认C语言规则适配clang，直接使用内置的c语言id
monaco.editor.setModelLanguage(editor.getModel(), 'c');

// 方法2：如果是你自行注册过clang专属语言配置，替换为你注册的语言id
monaco.editor.setModelLanguage(editor.getModel(), 'clang');

可选：注册自定义clang语言配置 #

如果默认的C语言语法高亮、补全规则不符合clang的使用需求，可以先注册自定义语言再切换：

// 第一步：注册clang语言
monaco.languages.register({ id: 'clang' });
// 第二步：自定义配置clang的语法规则、补全项、格式化规则等，示例：
monaco.languages.setMonarchTokensProvider('clang', {
  // 此处填写你的clang语法匹配规则
});

// 后续切换直接用自定义的clang id即可
monaco.editor.setModelLanguage(editor.getModel(), 'clang');

注意事项 #

• 切换语言后Monaco会自动重新渲染语法高亮，无需手动刷新编辑器
• 如果页面存在多个编辑器实例，需要获取对应目标编辑器的model再执行切换操作

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