如何通过编程在Monaco Editor指定代码块后追加代码？

核心方案 #

别手动拆解getValue()的文本找位置，直接用Monaco自带的查找+编辑API，精准定位后插入，比自己解析靠谱多了。

具体操作步骤 #

• 第一步：定位目标代码
  比如你要在指定注释后插入内容，用editor.find()方法匹配目标文本：

  // 定义要找的目标注释
  const targetText = '<!-- I WANT TO ADD CODE HERE PROGRAMMATICALLY -->';
  // 执行查找，拿到匹配结果
  const matchResults = editor.find(targetText);
  

• 第二步：计算插入位置
  找到匹配项后，取这段代码的结束位置，再往后跳一行（避免插在目标行里面）：

  if (matchResults.length > 0) {
    // 取第一个匹配结果的结束坐标
    const targetEnd = matchResults[0].range.end;
    // 插入位置设为目标行的下一行开头
    const insertPosition = {
      lineNumber: targetEnd.lineNumber + 1,
      column: 1
    };
  }
  

• 第三步：插入新代码
  用executeEdits()或者更简洁的insert()方法插入内容：

  // 要插入的代码（注意保持和原有代码一致的缩进）
  const newCodeBlock = '    <div>新增的内容</div>';
  
  // 方法1：用executeEdits（支持批量编辑）
  editor.executeEdits('insert-new-code', [
    {
      range: new monaco.Range(insertPosition.lineNumber, insertPosition.column, insertPosition.lineNumber, insertPosition.column),
      text: newCodeBlock
    }
  ]);
  
  // 方法2：直接用insert（单行插入更简洁）
  // editor.insert(insertPosition, newCodeBlock);
  

• 处理多行代码块的情况
  如果目标是多行结构，用正则匹配就行：

  // 匹配指定的div块
  const targetRegex = /<div>Big brown fox jumps at lazy dog.<\/div>/;
  const matchResults = editor.find(targetRegex);
  // 后续步骤和上面一致，取结束位置后插入
  

实用提示 #

• 若有多个匹配项，记得判断matchResults.length，选对要操作的那个（比如第一个或最后一个）
• 插入时对齐原有代码的缩进，避免格式混乱
• 可以用editor.getModel().getLineContent(lineNumber)确认目标位置的内容是否正确

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