Soy nuevo en Vuejs y tengo que integrar Vue2 con Monaco Editor. Quiero obtener valores ingresados por el usuario. Intenté varias formas pero no puedo obtener el valor. ¡Gracias por adelantado!
Este es mi archivo Editor.vue.
<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>Creo que lo puedes lograr de una forma muy sencilla asignando el editor a una variable, sería algo así:
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()
}
}Es importante que notes que en el método getEditorValue() hacemos uso del método nativo getValue() de monaco editor, este nos entrega el valor de la instancia del editor. Espero que sea lo que buscas.