从VUE 2中获取摩纳哥编辑的值

Question

我是Vuejs的新手，必须将VUE2与摩纳哥编辑整合。 我想获得用户输入的值。我尝试了几种方法，但无法获得价值。提前致谢！

这是我的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>

Answer 1

使用getValue（）方法，摩纳哥编辑器已内置的方法很容易获得值。

    <template>
      <div id="editor" ref="editor"></div>
    </template>
    
    <script>
    import * as monaco from "monaco-editor";
    
    export default {
      name: "CodeEditor",
      data() {
          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() {
            // Returns the current editor value
            return this.editor.getValue()
         },
      },
      mounted() {
        this.createEditor()
      },
    };
    </script>
    
    <style>
    #editor {
      height: 500px;
      width: 100%;
      overflow: hidden;
    }
    </style>

我在数据部分中设置了您的变量，并添加了createeditor和geteDitorValue方法，它们将帮助您更好地组织代码。