How do I insert text into a Monaco Editor?

Question

I have a monaco code editor embedded in my app.

How do I programmatically insert text on a particular line?

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");

score 19 · Answer 1 · edited Oct 14 '20 at 12:19

19

A more robust solution would be to use the Selection API instead of 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]);

If there is already a pre-selected text in the editor, the insert will replace it, which is in my opinion, the correct behavior.

edited Oct 14 '20 at 12:19

Jakub Zawiślak

3,892
2
14
17

answered Feb 13 '18 at 10:15

kosinix

1,481
16
19

1

`Selection` itself inherits from `Range`, so no need to recreate it. – Eugene Pankov Aug 26 '19 at 10:21

score 13 · Accepted Answer · answered Jan 16 '17 at 00:17

13

Using the executeEdits API

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]);

answered Jan 16 '17 at 00:17

Doug

10,752
11
57
97

2

Just like to say that there's also a method off the model called `pushEditOperations`, which is similar to `editor.executeEdits`. Quite helpful if you have multiple models and want to update one that isn't the editor's current model. – Benny Hinrichs Jul 03 '19 at 17:29

score 0 · Answer 3 · edited Jan 19 '21 at 19:18

0

To insert text at the cursor, there is this very simple way. I use it a lot to make Snippet toolbars:

editor.trigger('keyboard', 'type', {text: "test"});

It will replace the text if text is selected.

And you can also add multiple line text this way:

editor.trigger('keyboard', 'type', {text: `text on
multiple
line`});

edited Jan 19 '21 at 19:18

Dharman

21,838
18
57
107

answered Jan 19 '21 at 19:13

Miky Dal

49
4

How do I insert text into a Monaco Editor?

3 Answers3