ayanova/src/views/ay-report-edit.vue

@@ -32,12 +32,17 @@
         </v-btn-toggle>
       </v-col>
       <v-col cols="12" v-show="activeTab != 'properties'">
-        <MonacoEditor
+        <h6>Editor here</h6>
+        <div
+          id="editContainer"
+          style="width:100%;height:100%;border:1px solid #ccc;"
+        ></div>
+        <!-- <MonacoEditor
           ref="editor"
           v-model="obj.template"
           language="javascript"
           :options="monacoOptions"
-        />
+        /> -->
       </v-col>
       <v-col cols="12" v-show="activeTab == 'properties'">
         <h5>Properties</h5>
@@ -72,13 +77,24 @@
 //
 ////////////////////////////////////////////////////////////////////////////////////////////////////////////
 //https://github.com/egoist/vue-monaco
-import MonacoEditor from "vue-monaco";
-
+// import MonacoEditor from "vue-monaco";
+import * as monaco from "monaco-editor";
 
 const FORM_KEY = "ay-report-edit";
 export default {
-  components: {
-    MonacoEditor
+  // components: {
+  //   MonacoEditor
+  // },
+  mounted() {
+    this.editor = monaco.editor.create(
+      document.getElementById("editContainer"),
+      {
+        value: 'console.log("Hello, world");',
+        theme: "vs",
+        language: "javascript"
+      }
+    );
+    console.log(this.editor);
   },
   beforeCreate() {
     window.$gz.eventBus.$emit("menu-change", {
@@ -98,9 +114,10 @@ export default {
       editingActiveTranslation: false,
       duplicating: false,
       monacoOptions: { automaticLayout: true },
+      editor: null,
       editAreaHeight: 300,
-      activeTab: "properties",
-      lastTab: "properties",
+      activeTab: "template",
+      lastTab: "template",
       obj: {
         id: 0,
         concurrency: 0,
@@ -155,6 +172,7 @@ import router from "./router";
     //probably should do this way
     //https://github.com/Microsoft/monaco-editor/issues/604
     //https://github.com/Microsoft/monaco-editor/blob/bad3c34056624dca34ac8be5028ae3454172125c/website/playground/playground.js#L108
+    //https://github.com/microsoft/monaco-editor-samples/tree/master/browser-esm-webpack-monaco-plugin
     onViewChange() {
       let vm = this;
       let editor = vm.$refs.editor ? vm.$refs.editor.getEditor() : null;