从 Vue 2 中的 Monaco Editor 获取值答案

【问题标题】：Get values from Monaco Editor in Vue 2从 Vue 2 中的 Monaco Editor 获取值
【发布时间】：2022-08-24 07:48:54
【问题描述】：

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

标签： javascript vue.js vuejs2 monaco-editor

【解决方案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
        }
      },
      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 方法，它们将帮助您更好地组织代码。

【讨论】：