在 Monaco 编辑器网页版的查找和替换操作中以编程方式设置替换字段

Question

我正在使用 Monaco Editor 的网络版本，并尝试实现查找和替换功能。我可以通过创建范围选择成功设置查找文本字段，但我在设置替换文本字段时遇到问题。

这是我到目前为止所拥有的：

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

// Hover on each property to see its docs!
const myEditor = monaco.editor.create(document.getElementById("container"), {
    value,
    language: "javascript",
    automaticLayout: true,
});

const model = myEditor.getModel();
const range = model.findMatches(textToSearch)[0].range;
myEditor.setPosition({column: range.startColumn || 1, lineNumber: range.startLineNumber || 1});
myEditor.revealLine(range.startLineNumber || 1);
myEditor.setSelection(range);

// open find & replace panel
myEditor.getAction('editor.action.startFindReplaceAction').run()

我浏览了 Monaco Editor 文档和各种论坛，但没有找到明确的解决方案。有没有人设法在查找和替换操作中设置替换文本字段？

任何帮助或代码示例将不胜感激。

Answer 1

您可以使用操作

editor.actions.findWithArgs

而不是

editor.action.startFindReplaceAction

。这将允许您传递参数，包括要用来替换的字符串：

myEditor.getAction('editor.actions.findWithArgs').run({replaceString: textReplaceWith})

这是一个工作演示。

理论上，您应该能够传入要出现在搜索字段中的字符串（作为

searchString

参数），并且不需要在进行范围选择的位置添加代码位，但是我还没有这样做过除非编辑器内容为空，否则能够使其工作，因为它始终选择编辑器的第一个单词放入搜索字段中：

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

/* Omit range selection code */
// const model = myEditor.getModel();
// const range = model.findMatches(textToSearch)[0].range;
// myEditor.setPosition({column: range.startColumn || 1, lineNumber: range.startLineNumber || 1});
// myEditor.revealLine(range.startLineNumber || 1);
// myEditor.setSelection(range);

// open find & replace panel
myEditor.getAction('editor.actions.findWithArgs').run({
  searchString: textToSearch,
  replaceString: textReplaceWith
})