从摩纳哥编辑器获取值

时间:2021-05-19 18:47:46

标签: vue.js monaco-editor vue-composition-api

我在我的 Web 应用程序(Vue 3 和组合 API)中使用 Microsoft/Monaco 编辑器。 我正在尝试使用以下代码从摩纳哥获取值:

<script>
import { ref, onMounted } from "vue";
import * as monaco from "monaco-editor";

export default {
  props: {
    context: {
      type: [String, Number],
      default: "Let's write some code",
    },
  },

  setup(props) {
    const monacoWrapper = ref(null);

    onMounted(() => {
      monaco.editor.defineTheme("lightBlue", {
        base: "vs-dark",
        inherit: true,
        rules: [{ background: "#1D252C" }],
        colors: {
          "editor.background": "#1D252C",
        },
      });

      monaco.editor.setTheme("lightBlue");

      monaco.editor.create(monacoWrapper.value, {
        value: props.context,
        automaticLayout: true,
        language: "javascript",
        minimap: {
          enabled: false,
        },
      });
    });

    const getValuesFromMonaco = () => {
      var text = monacoWrapper.value.getValue();
      console.log(text);
    };

    return {
      monacoWrapper,
      getValuesFromMonaco,
    };
  },
};
</script>

如您所见,Monaco 使用已安装的钩子启动,然后我通过单击始终会出现以下错误的按钮来触发“getValuesFromMonaco”函数:

myerror

我也尝试应用这里提到的解决方案但没有成功:Get the value of Monaco Editor

谢谢!

0 个答案:

没有答案