從 Vue 2 中的 Monaco Editor 獲取值

Question

我是 Vuejs 的新手，必須將 Vue2 與 Monaco Editor 集成。 我想獲取用戶輸入的值。 我嘗試了幾種方法，但無法獲得價值。 提前致謝！

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

使用 monaco 編輯器內置的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方法，它們將幫助你更好地組織你的代碼。