I am new to Vuejs and have to integrate Vue2 with Monaco Editor. I want to get values input by user. I tried few ways but cannot get the value. Thanks in advance!
This is my Editor.vue file.
<template>
<div id="editor" ref="editor"></div>
</template>
<script>
import * as monaco from "monaco-editor";
export default {
name: "CodeEditor",
mounted() {
const editorOptions = {
value: [
"function greeting() {",
'\tconsole.log("Test Monaco...);',
"}",
].join("\n"),
language: "text/javascript",
minimap: { enabled: false },
wordWrap: true,
automaticLayout: true,
};
window.editor = monaco.editor.create(document.getElementById("editor"), editorOptions);
},
computed: {
getUserInput() {
// how to get user input???
},
},
};
</script>
<style>
#editor {
height: 500px;
width: 100%;
overflow: hidden;
}
</style>
I think you can achieve it in a very simple way by assigning the editor to a variable, it would be something like this:
import * as monaco from "monaco-editor"; export default { name: "CodeEditor", data() { return { editor: null, editorOptions: { value: [ "function greeting() {", '\tconsole.log("Test Monaco...);', "}", ].join("\n"), language: "text/javascript", minimap: { enabled: false }, wordWrap: true, automaticLayout: true } } }, methods: { createEditor() { this.editor = monaco.editor.create(document.getElementById("editor"), this.editorOptions); }, getEditorValue() { // Ejecutas el método getValue() que es nativo de monaco editor return this.editor.getValue() } }, mounted() { this.createEditor() } } It is important that you note that in the getEditorValue() method we make use of monaco editor's native getValue() method, which gives us the value of the editor instance. I hope it's what you want.