[英]How do I insert text into a Monaco Editor?
我的应用程序中嵌入了一个摩纳哥代码编辑器。
如何以编程方式在特定行上插入文本?
var editor = monaco.editor.create(document.getElementById("container"), {
value: "// First line\nfunction hello() {\n\talert('Hello world!');\n}\n// Last line",
language: "javascript",
lineNumbers: false,
roundedSelection: false,
scrollBeyondLastLine: false,
readOnly: false,
theme: "vs-dark",
});
// how do I do this?
editor.insertText("FOO");
更强大的解决方案是使用Selection API 而不是 Position
var selection = editor.getSelection();
var id = { major: 1, minor: 1 };
var text = "XXX";
var op = {identifier: id, range: selection, text: text, forceMoveMarkers: true};
editor.executeEdits("my-source", [op]);
如果编辑器中已经有预先选择的文本,插入将替换它,在我看来,这是正确的行为。
var line = editor.getPosition();
var range = new monaco.Range(line.lineNumber, 1, line.lineNumber, 1);
var id = { major: 1, minor: 1 };
var text = "FOO";
var op = {identifier: id, range: range, text: text, forceMoveMarkers: true};
editor.executeEdits("my-source", [op]);
要在光标处插入文本,有这种非常简单的方法。 我经常使用它来制作片段工具栏:
editor.trigger('keyboard', 'type', {text: "test"});
如果选择文本,它将替换文本。
您还可以通过这种方式添加多行文本:
editor.trigger('keyboard', 'type', {text: `text on
multiple
line`});
更自然的解决方案(如上所述)可以是使用 monaco 附带的executeEdits方法,并使用带有行号和列号的特定范围,因为在示例中它们始终使用第一行:
const startLineNumber = 15 // Line number in which the content will start being typed
const startColumn = 5 // Column number in which the content will start being typed
const endLineNumber = 18 // Line number in which the text will finish
const endColumn = 25
const text = "This is the new text" // The content going to be added
const range = new monaco.edito.Range(startLineNumber, startColumn, endLineNumber, endColumn); // It will go to the specific position of the editor
const id = { major: 1, minor: 1 }; // Required generic id
const editOperation = {identifier: id, range: range, text: text, forceMoveMarkers: true}; // The operation going to be performed
monaco.editor.executeEdits("custom-code", [ editOperation ]); // Runs the instruction
上面代码的好处是它可以添加、删除、更新和替换现有代码,因此它会非常高效,最终用户会看到它就像他/她正在打字一样。
我在使用 react 和 typescript 实现这一点时遇到了问题,所以希望这可以帮助某人。
import Editor, { Monaco, OnMount } from '@monaco-editor/react';
import { editor, languages } from 'monaco-editor';
...
const CustomEditor: React.FC = () => {
const [monacoInstance, setMonacoInstance] = React.useState<editor.IStandaloneCodeEditor | null>(null);
const insertText = (text: string) => {
if (monacoInstance) {
const selection = monacoInstance.getSelection();
const id = { major: 1, minor: 1 };
const op = {
identifier: id,
range: {
startLineNumber: selection?.selectionStartLineNumber || 1,
startColumn: selection?.selectionStartColumn || 1,
endLineNumber: selection?.endLineNumber || 1,
endColumn: selection?.endColumn || 1,
},
text,
forceMoveMarkers: true,
};
monacoInstance.executeEdits('my-source', [op]);
}
};
const editorMount: OnMount = (editorL: editor.IStandaloneCodeEditor) => {
setMonacoInstance(editorL);
};
...
<Editor
onMount={editorMount}
...
<StyledButton // styled comp
onClick={() => {insertText('inserted text');}}
>
insert text
</StyledButton>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.