monaco组件化

src/components/MonocaEditor.vue

@@ -0,0 +1,65 @@
+<template>
+  <div id="monocaEditor"></div>
+</template>
+
+<script>
+import * as monaco from "monaco-editor";
+import { toRaw } from "vue";
+import utoolsApi from "!raw-loader!../types/utools.api.d.ts";
+import quickcommandApi from "!raw-loader!../types/quickcommand.api.d.ts";
+import electronApi from "!raw-loader!../types/electron.d.ts";
+import nodeApi from "!raw-loader!../types/node.api.d.ts";
+import commonApi from "!raw-loader!../types/common.d.ts";
+
+export default {
+  data() {
+    return {
+      editor: null,
+    };
+  },
+  mounted() {
+    this.initEditor();
+  },
+  methods: {
+    initEditor() {
+      this.editor = monaco.editor.create(
+        document.getElementById("monocaEditor"),
+        {
+          value: "",
+          language: "javascript",
+          automaticLayout: true,
+          foldingStrategy: "indentation",
+          autoClosingBrackets: true,
+          tabSize: 2,
+          minimap: {
+            enabled: false,
+          },
+        }
+      );
+      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
+        noSemanticValidation: true,
+        noSyntaxValidation: false,
+      });
+      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+        target: monaco.languages.typescript.ScriptTarget.ES6,
+        allowNonTsExtensions: true,
+        allowJs: true,
+        lib: [],
+      });
+      monaco.languages.typescript.javascriptDefaults.addExtraLib(
+        quickcommandApi + utoolsApi + electronApi + nodeApi + commonApi,
+        "api.d.ts"
+      );
+    },
+    getEditorValue() {
+      return toRaw(this.editor).getValue();
+    },
+    setEditorLanguage(language) {
+      monaco.editor.setModelLanguage(this.editor.getModel(), language);
+    },
+    addEditorCommand(key, callback) {
+      this.editor.addCommand(key, callback);
+    },
+  },
+};
+</script>

src/pages/CodeRunner.vue

@@ -85,8 +85,8 @@
       </div>
     </div>
     <div class="row">
-      <div
+      <MonocaEditor
-        id="monocaEditor"
+        ref="editor"
         style="
           position: fixed;
           bottom: 1px;
@@ -128,20 +128,14 @@
 
 <script>
 import globalVars from "components/GlobalVars";
-import * as monaco from "monaco-editor";
+import MonocaEditor from "components/MonocaEditor";
-import { toRaw } from "vue";
-import utoolsApi from "!raw-loader!../types/utools.api.d.ts";
-import quickcommandApi from "!raw-loader!../types/quickcommand.api.d.ts";
-import electronApi from "!raw-loader!../types/electron.d.ts";
-import nodeApi from "!raw-loader!../types/node.api.d.ts";
-import commonApi from "!raw-loader!../types/common.d.ts";
 
 export default {
+  components: { MonocaEditor },
   data() {
     return {
       options: Object.keys(globalVars.programs),
       program: "quickcommand",
-      editor: null,
       customOptions: { bin: "", argv: "", ext: "" },
       scptarg: "",
       scriptCode: "",
@@ -154,7 +148,7 @@ export default {
     };
   },
   mounted() {
-    this.initEditor();
+    this.bindKeys();
   },
   computed: {},
   created() {},
@@ -164,45 +158,12 @@ export default {
     },
   },
   methods: {
-    initEditor() {
+    bindKeys() {
       let that = this;
-      this.editor = monaco.editor.create(
+      // ctrl+b 运行
-        document.getElementById("monocaEditor"),
+      this.$refs.editor.addEditorCommand(2048 | 32, function () {
-        {
+        that.runCurrentCommand();
-          value: "",
-          language: "javascript",
-          automaticLayout: true,
-          foldingStrategy: "indentation",
-          autoClosingBrackets: true,
-          tabSize: 2,
-          minimap: {
-            enabled: false,
-          },
-        }
-      );
-      this.editor.addCommand(
-        monaco.KeyMod.CtrlCmd | monaco.KeyCode.KeyB,
-        function () {
-          that.runCurrentCommand();
-        }
-      );
-      monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
-        noSemanticValidation: true,
-        noSyntaxValidation: false,
       });
-      monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
-        target: monaco.languages.typescript.ScriptTarget.ES6,
-        allowNonTsExtensions: true,
-        allowJs: true,
-        lib: [],
-      });
-      monaco.languages.typescript.javascriptDefaults.addExtraLib(
-        quickcommandApi + utoolsApi + electronApi + nodeApi + commonApi,
-        "api.d.ts"
-      );
-    },
-    getEditorValue() {
-      return toRaw(this.editor).getValue();
     },
     matchLanguage() {
       let language = Object.values(globalVars.programs).filter(
@@ -214,10 +175,7 @@ export default {
     },
     setLanguage(language) {
       let highlight = globalVars.programs[language].highlight;
-      monaco.editor.setModelLanguage(
+      this.$refs.editor.setEditorLanguage(highlight ? highlight : language);
-        this.editor.getModel(),
-        highlight ? highlight : language
-      );
     },
     showHelp() {
       utools.createBrowserWindow("./helps/quickcommand.html", {
@@ -236,7 +194,7 @@ export default {
       );
     },
     async runCurrentCommand() {
-      let cmd = this.getEditorValue();
+      let cmd = this.$refs.editor.getEditorValue();
       cmd = window.special(cmd);
       cmd = await this.replaceTempInputVals(cmd);
       let terminal = false;