添加编辑器

package.json

@@ -16,6 +16,8 @@
 		"indexdbwrapper": "^1.0.4",
 		"jszip": "^3.2.2",
 		"moment": "^2.24.0",
+		"monaco-editor": "^0.19.0",
+		"monaco-editor-webpack-plugin": "^1.8.1",
 		"path": "^0.12.7",
 		"querystringify": "^2.1.1",
 		"socket.io-client": "^2.3.0",

public/index.html

@@ -17,8 +17,9 @@
 </noscript>
 <script>
 	window.__data = {
-		token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjA4NSwibmFtZSI6IuWKs-eQquWzsCIsImFjY291bnQiOiJsYW9xaWZlbmciLCJlbWFpbCI6Imxhb3FpZmVuZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxMzQ1Njc3NDE1MyIsImRpbmdVc2VySWQiOiI1MDY5MDYyOTIxMjkxMDAxIiwibW9kZWxBdXRob3JpemUiOmZhbHNlLCJsb2dpblRpbWVvdXQiOjE0ODA5LCJnbXRDcmVhdGUiOjE1MzQ0MTIwMTUwMDAsImdtdE1vZGlmaWVkIjoxNTczODgyMDk2MDAwLCJzeXN0ZW1JZFNldCI6WzAsMSwzNCwyMjcsMzYsMzcsMjMxLDIwMywxOSwyMSwyNDYsMjMsMjUsMjQ5LDI3LDMwXSwiaWF0IjoxNTc1MzQwMzg2fQ.2JEYMRx6wbJsMIMh3quyM14OsoMz_iJRq4Az_xz-WTc' : '$TOKEN$' %>",
-		apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>"
+		token : "<%= process.env.NODE_ENV === 'development' ? 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6MjU0NywibmFtZSI6IuWNnum-meS6rSIsImFjY291bnQiOiJiaWFubG9uZ3RpbmciLCJlbWFpbCI6ImJpYW5sb25ndGluZ0BkdWliYS5jb20uY24iLCJtb2JpbGUiOiIxNTg2OTE3NDMxMSIsImRpbmdVc2VySWQiOiIwMTE1MTgyMTEyMjE3OTYzNzAiLCJtb2RlbEF1dGhvcml6ZSI6ZmFsc2UsImxvZ2luVGltZW91dCI6NzczNjEsImdtdENyZWF0ZSI6MTU1OTUyNjcxNDAwMCwiZ210TW9kaWZpZWQiOjE1NzM3NDk1OTEwMDAsInN5c3RlbUlkU2V0IjpbMCwxLDM0LDM2LDM3LDIzMSwyMDMsNDQsMTksMjEsMjQ2LDIzLDI0OSwyNSwyNywzMF0sImlhdCI6MTU3Nzk1MjgxNH0.GNeP25ZZK5ca7rvwtj2BaQ3GZatGNSR3CthSN98PSD4' : '$TOKEN$' %>",
+		apiHost : "<%= process.env.NODE_ENV === 'development' ? 'http://beacon.duibadev.com.cn' : '$API_HOST$' %>",
+		types: `$TYPES$`
 	}
 </script>
 <div id="app"></div>

src/views/Editor/components/MonacoEditor.vue

+<template>
+  <div id="container"></div>
+</template>
+<script>
+import * as monaco from "monaco-editor";
+export default {
+  name: "MonacoEditor",
+  props: {
+    options: Object,
+    code: String
+  },
+  mounted() {
+    const { options, code } = this;
+    const defaultConfig = {
+      language: "javascript",
+      value: "",
+      minimap: {
+        enabled: false
+      }
+    };
+
+    // compiler options
+    monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
+      target: monaco.languages.typescript.ScriptTarget.ES6,
+      allowNonTsExtensions: true
+    });
+    // extra libraries
+    monaco.languages.typescript.javascriptDefaults.addExtraLib(
+      [window.__data.types].join("\n")
+    );
+    const config = Object.assign({}, defaultConfig, options, { value: code });
+    console.log(config);
+    this.editor = monaco.editor.create(
+      document.getElementById("container"),
+      config
+    );
+  }
+};
+</script>
+<style lang="scss" scoped>
+#container {
+  width: 100%;
+  height: 100%;
+}
+</style>
\ No newline at end of file

vue.config.js

-const serverHost = 'http://10.10.95.74:7777';
+const serverHost = 'http://10.10.95.74:7777'
 
-//const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin');
+const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
 
 module.exports = {
   publicPath: process.env.NODE_ENV === 'production' ? '//yun.duiba.com.cn/editor/zeroing/v1/' : '',
@@ -26,9 +26,10 @@ module.exports = {
   },*/
   configureWebpack: {
     plugins: [
-      /*new MonacoWebpackPlugin({
-        languages: ['html', 'javascript', 'json']
-      })*/
+      new MonacoWebpackPlugin({
+        languages: ['javascript', 'typescript', 'json'],
+        publicPath: "/monaco"
+      })
     ]
   }
-};
+}

yarn.lock

@@ -5969,6 +5969,18 @@ moment@^2.24.0:
   resolved "https://registry.npm.taobao.org/moment/download/moment-2.24.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fmoment%2Fdownload%2Fmoment-2.24.0.tgz#0d055d53f5052aa653c9f6eb68bb5d12bf5c2b5b"
   integrity sha1-DQVdU/UFKqZTyfbraLtdEr9cK1s=
 
+monaco-editor-webpack-plugin@^1.8.1:
+  version "1.8.1"
+  resolved "https://registry.npm.taobao.org/monaco-editor-webpack-plugin/download/monaco-editor-webpack-plugin-1.8.1.tgz#5701bfce16c14c51503a607726d97fd92784af26"
+  integrity sha1-VwG/zhbBTFFQOmB3Jtl/2SeEryY=
+  dependencies:
+    loader-utils "^1.2.3"
+
+monaco-editor@^0.19.0:
+  version "0.19.0"
+  resolved "https://registry.npm.taobao.org/monaco-editor/download/monaco-editor-0.19.0.tgz#c6e774210f3b292ff739e96f45a1cc78bf5ac2e7"
+  integrity sha1-xud0IQ87KS/3OelvRaHMeL9awuc=
+
 move-concurrently@^1.0.1:
   version "1.0.1"
   resolved "https://registry.npm.taobao.org/move-concurrently/download/move-concurrently-1.0.1.tgz#be2c005fda32e0b29af1f05d7c4b33214c701f92"