Reset Monaco Editor state

Question

I've implemented the Monaco Editor ( https://github.com/Microsoft/monaco-editor ) as a way for the user to insert some JSON.

I enable the editor once the user clicks a "post" button. The problem is, the editor is enabled inside a switch function. So once the button have been clicked once, the editor will like append beneath the first created editor, if the client clicks the same button again. Is there any way to "reset" the editor, so it wont actually append, but just instead either make a new one, or use the one already created?

Here is my current code.

require.config({ paths: { 'vs': '/scripts/monaco-editor/min/vs' } });

switch (id) {
        case 'post':
            $('#httpMethodGet').css('display', 'none');
            $('#httpMethodPost').show();
            require(['vs/editor/editor.main'], function () {
                monaco.languages.json.jsonDefaults.setDiagnosticsOptions({
                    schemas: [{
                        uri: "http://myserver/bar-schema.json",
                        schema: {
                            type: "object",
                            properties: {
                                q1: {
                                    enum: ["x1", "x2"]
                                }
                            }
                        }
                    }]
                });
                var jsonObject = [
                    '{',
                    '    "$schema": "http://myserver/foo-schema.json"',
                    "}"
                ].join('\n');
                window.editor = monaco.editor.create(document.getElementById('codeEditor'), {
                    value: jsonObject,
                    language: 'json',
                    theme: 'vs-dark',
                    scrollBeyondLastLine: false,
                    renderWhitespace: true
                });
            });
            break;

So I want the window.editor = monaco.editor.create(document.getElementById('codeEditor'), {}) to either use the same already created, if there is one created, or make a new one, each time this switch cases is entered, so it doesn't append bellow the one(s) already created.

Answer 1

You should create the monaco code editor out side your switch function. Inside your function you should change your model only.

So before the switch() function

window.editor = monaco.editor.create(document.getElementById('codeEditor'), {
                    value: '',
                    language: 'json',
                    theme: 'vs-dark',
                    scrollBeyondLastLine: false,
                    renderWhitespace: true
                });

then inside switch()

window.editor.getModel(). setValue(jsonObject);

APIs are avalable here .