Get values from Monaco Editor

Question

I'm using Microsoft/Monaco editor in my Web-app (Vue 3 & composition API). I'm trying to get the value from Monaco using the following code:

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

As you can see, Monaco initiated using the mounted hook, and then I'm triggering the "getValuesFromMonaco" function by clicking on a button that always brings me the following error:

I've also tried applying the solutions mentioned here but without success: Get the value of Monaco Editor

Thanks!

Answer 1

Monaco Editor Web Worker Issue with Vue 3

I faced the same problem as you (using Vue 3 too). This person's setup helped me. Assign the editor to a variable outside the init function.

Answer 2

monacoWrapper.value is an HTMLElement, not an instance of editor.IStandaloneCodeEditor. To get the IStandaloneCodeEditor you can call methods on, use the return value of monaco.editor.create().

There is a separate, unrelated issue of IStandaloneCodeEditor.getValue() not working when the editor is a proxy. For that error see https://github.com/microsoft/monaco-editor/issues/2714.