如何在Web版Monaco Editor中通过编程设置替换文本字段？

Monaco Editor的查找替换面板状态由内部的findController管理，直接调用打开面板的action无法预设替换文本，需要通过操作这个控制器来实现。

以下是修改后的完整代码：

const value = `function hello() {
    alert('Hello world!');
}`;
const textToSearch = 'hello';
const textReplaceWith = 'world';

const myEditor = monaco.editor.create(document.getElementById("container"), {
    value,
    language: "javascript",
    automaticLayout: true,
});

// 获取查找功能控制器
const findController = myEditor.getContribution('editor.contrib.findController');

// 设置查找框参数
findController.setFindQuery({
    searchString: textToSearch,
    isRegex: false,
    isCaseSensitive: false,
    isWholeWord: false
});

// 设置替换框文本
findController.setReplaceQuery({
    replaceString: textReplaceWith
});

// 打开查找替换面板
myEditor.getAction('editor.action.startFindReplaceAction').run();

关键说明 #

• getContribution('editor.contrib.findController')：获取编辑器负责管理查找替换状态的核心控制器，所有面板输入框的内容都由它维护。
• setFindQuery：不仅可以预设查找文本，还能配置匹配规则（如是否正则、大小写敏感等），如果不需要选区定位逻辑，甚至可以省略手动选中文本的代码，直接用这个方法预设查找内容。
• setReplaceQuery：这是填充替换文本字段的关键方法，传入包含replaceString的对象即可完成预设。

如果需要保留选区定位的逻辑，只需将原有选区相关代码保留即可，不会影响预设字段的功能。

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