├── .github └── workflows │ └── cl.yml ├── .gitignore ├── README.md ├── babel.config.js ├── package-lock.json ├── package.json ├── public ├── favicon.ico ├── index.html ├── testCode1.js └── testCode2.js ├── src ├── App.vue ├── assets │ └── logo.png ├── components │ ├── HelloWorld.vue │ └── monacoeditor.vue └── main.js └── vue.config.js /.github/workflows/cl.yml: -------------------------------------------------------------------------------- 1 | 2 | # This is a basic workflow to help you get started with Actions 3 | 4 | name: CI 5 | 6 | # Controls when the workflow will run 7 | on: 8 | # Triggers the workflow on push or pull request events but only for the V1.0-beat branch 9 | push: 10 | branches: [ main ] 11 | pull_request: 12 | branches: [ main ] 13 | 14 | # Allows you to run this workflow manually from the Actions tab 15 | workflow_dispatch: 16 | 17 | # jobs 表示要执行的一项或者多项任务 18 | jobs: 19 | # 任务名，可自定义 20 | build-and-deploy: 21 | # runs-on字段指定运行所需要的虚拟机环境。它是必填字段。目前可用的虚拟机如下。 22 | runs-on: ubuntu-latest 23 | # steps表示执行步骤 24 | steps: 25 | # 检出代码，这里用了 actions/checkout@master 库来完成 26 | - name: Checkout 27 | uses: actions/checkout@master 28 | # 这里展示了如何执行多条命令 29 | - name: Install and Build 30 | run: | 31 | yarn 32 | yarn build 33 | # 这里引用了别人写好的发布库，具体参数信息可以查阅上面的链接 34 | - name: Deploy to GitHub Pages 35 | uses: JamesIves/github-pages-deploy-action@4.0.0 36 | with: 37 | branch: gh-pages 38 | folder: dist 39 | -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | .DS_Store 2 | node_modules 3 | /dist 4 | 5 | 6 | # local env files 7 | .env.local 8 | .env.*.local 9 | 10 | # Log files 11 | npm-debug.log* 12 | yarn-debug.log* 13 | yarn-error.log* 14 | pnpm-debug.log* 15 | 16 | # Editor directories and files 17 | .idea 18 | .vscode 19 | *.suo 20 | *.ntvs* 21 | *.njsproj 22 | *.sln 23 | *.sw? 24 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # easy-codeeditor 2 | # Monaco在线代码编辑器使用总结 3 | ## 1.什么是Monaco 4 | Monaco编辑器是为VS代码提供支持的代码编辑器 5 | [官方API文档](https://microsoft.github.io/monaco-editor/api/modules/monaco.editor.html) 6 | ## 2.Monaco Editor安装及使用 7 | 8 | #### 2.1安装 9 | 10 | ```cmd 11 | npm install monaco-editor --save-dev 12 | 13 | npm install monaco-editor-webpack-plugin --save-dev 14 | ``` 15 | 16 | #### 2.2配置vue.config.js 17 | 18 | ```js 19 | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') 20 | module.exports = { 21 | configureWebpack: { 22 | plugins: [ 23 | new MonacoWebpackPlugin() 24 | ] 25 | } 26 | } 27 | 28 | ``` 29 | #### 2.3 开始使用 30 | 31 | ##### 2.3.1.vue文件中导入monaco 32 | 33 | ```js 34 | import * as monaco from 'monaco-editor' 35 | ``` 36 | 37 | ##### 2.3.2.创建代码编辑区域 38 | 39 | ```html 40 |
41 | ``` 42 | 43 | #### 2.3.3.初始化container 44 | 45 | ##### 2.3.3.1 准备monaco基础配置 46 | 47 | ```js 48 | data () { 49 | return { 50 | // 主要配置 51 | defaultOpts: { 52 | // 编辑器的值 53 | value: '', 54 | // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网 55 | theme: 'vs-dark', 56 | // 右侧不显示编辑器预览框 57 | roundedSelection: true, 58 | // 自动缩进 59 | autoIndent: true , 60 | // 是否只读 61 | readOnly: false, 62 | // 语言类型java,c,php更多选择详见官网 63 | language: 'javascript', 64 | } 65 | // 编辑器对象 66 | monacoEditor: {} 67 | } 68 | }, 69 | ``` 70 | 71 | ##### 2.3.3.2 初始化monaco编辑器 72 | 73 | ```js 74 | methods: { 75 | init () { 76 | // 初始化container的内容，销毁之前生成的编辑器 77 | this.$refs.container.innerHTML = '' 78 | // 生成编辑器配置 79 | let editorOptions = Object.assign(this.defaultOpts, this.opts) 80 | // 生成编辑器对象 81 | this.monacoEditor = monaco.editor.create(this.$refs.container, editorOptions) 82 | // 编辑器内容发生改变时触发 83 | this.monacoEditor.onDidChangeModelContent(() => { 84 | this.$emit('change', this.monacoEditor.getValue()) 85 | }) 86 | }, 87 | // 手动编辑器中的内容 88 | getValue() { 89 | this.$message.info(this.$refs.monaco.getVal()) 90 | }, 91 | } 92 | ``` 93 | 94 | ##### 整体源码: 95 | 96 | 1) **monacoeditor.vue** 97 | ```html 98 | 105 | 165 | 166 | ``` 167 | 168 | 2) **App.vue** 169 | 170 | ```html 171 | 172 | 230 | 328 | 338 | 339 | 340 | ``` 341 | ##### 2.3.3.3 效果: 342 | 343 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210319153511554.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) 344 | 345 | 346 | ##### 2.3.3.4 注意: 347 | 348 | 1)当我们修改了defaultOpts的配置后我们需要重新初始化monaco编辑器;即重新执行this.init(); 349 | 350 | #### 2.4 编辑器代码diff的实现 351 | 352 | ```js 353 | init () { 354 | // 初始化container的内容，销毁之前生成的编辑器 355 | this.$refs.container.innerHTML = '' 356 | // 生成编辑器配置 357 | let editorOptions = Object.assign(this.defaultOpts, this.opts) 358 | editorOptions.readOnly = true; 359 | editorOptions.language = 'javascript' 360 | // 初始化编辑器实例 361 | this.monacoDiffInstance = monaco.editor.createDiffEditor(this.$refs['container'],editorOptions) 362 | this.monacoDiffInstance.setModel({ 363 | // oldValue为以前的值 364 | original: monaco.editor.createModel(this.oldValue, editorOptions.language), 365 | // oldValue为新的值 366 | modified: monaco.editor.createModel(this.newValue, editorOptions.language) 367 | }) 368 | } 369 | ``` 370 | **效果:**: 371 | 372 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/2021031915354219.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) 373 | 374 | 375 | ##### 2.4.1切换为行内比较 376 | 377 | ```js 378 | //直接升级配置项 renderSideBySide: false 即可 379 | this.monacoDiffInstance.updateOptions({ 380 | renderSideBySide: false 381 | }); 382 | ``` 383 | 384 | **效果:** 385 | 386 | ![在这里插入图片描述](https://img-blog.csdnimg.cn/20210319153558909.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl8zOTA4NTgyMg==,size_16,color_FFFFFF,t_70) 387 | 388 | 389 | ### [本文章项目地址](https://github.com/Jason-chen-coder/easy-codeEditor) 390 | 391 | ## Project setup 392 | ``` 393 | npm install 394 | ``` 395 | 396 | ### Compiles and hot-reloads for development 397 | ``` 398 | npm run serve 399 | ``` 400 | 401 | ### Compiles and minifies for production 402 | ``` 403 | npm run build 404 | ``` 405 | 406 | ### Lints and fixes files 407 | ``` 408 | npm run lint 409 | ``` 410 | 411 | ### Customize configuration 412 | See [Configuration Reference](https://cli.vuejs.org/config/). 413 | -------------------------------------------------------------------------------- /babel.config.js: -------------------------------------------------------------------------------- 1 | module.exports = { 2 | presets: [ 3 | '@vue/cli-plugin-babel/preset' 4 | ] 5 | } 6 | -------------------------------------------------------------------------------- /package.json: -------------------------------------------------------------------------------- 1 | { 2 | "name": "Monaco-EasyCodeEditor", 3 | "version": "0.1.0", 4 | "private": true, 5 | "scripts": { 6 | "serve": "vue-cli-service serve", 7 | "build": "vue-cli-service build", 8 | "lint": "vue-cli-service lint" 9 | }, 10 | "dependencies": { 11 | "core-js": "^3.6.5", 12 | "element-ui": "^2.15.1", 13 | "vue": "^2.6.11" 14 | }, 15 | "devDependencies": { 16 | "@vue/cli-plugin-babel": "~4.5.0", 17 | "@vue/cli-plugin-eslint": "~4.5.0", 18 | "@vue/cli-service": "~4.5.0", 19 | "babel-eslint": "^10.1.0", 20 | "eslint": "^6.7.2", 21 | "eslint-plugin-vue": "^6.2.2", 22 | "monaco-editor": "^0.23.0", 23 | "monaco-editor-webpack-plugin": "^3.0.1", 24 | "vue-template-compiler": "^2.6.11" 25 | }, 26 | "eslintConfig": { 27 | "root": true, 28 | "env": { 29 | "node": true 30 | }, 31 | "extends": [ 32 | "plugin:vue/essential", 33 | "eslint:recommended" 34 | ], 35 | "parserOptions": { 36 | "parser": "babel-eslint" 37 | }, 38 | "rules": {} 39 | }, 40 | "browserslist": [ 41 | "> 1%", 42 | "last 2 versions", 43 | "not dead" 44 | ] 45 | } 46 | -------------------------------------------------------------------------------- /public/favicon.ico: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jason-chen-coder/Monaco-EasyCodeEditor/76e4f9a95cfaa3f8a3a659f6eda1cd9e94e367dd/public/favicon.ico -------------------------------------------------------------------------------- /public/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | <%= htmlWebpackPlugin.options.title %> 9 | 10 | 11 | 14 |
15 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /public/testCode1.js: -------------------------------------------------------------------------------- 1 | /* 2 | © Microsoft. All rights reserved. 3 | 4 | This library is supported for use in Windows Tailored Apps only. 5 | 6 | Build: 6.2.8100.0 7 | Version: 0.5 8 | */ 9 | 10 | (function (global, undefined) { 11 | "use strict"; 12 | undefinedVariable = {}; 13 | undefinedVariable.prop = 5; 14 | 15 | function initializeProperties (target, members) { 16 | var keys = Object.keys(members); 17 | var properties; 18 | var i, len; 19 | for (i = 0, len = keys.length; i < len; i++) { 20 | var key = keys[i]; 21 | var enumerable = key.charCodeAt(0) !== /*_*/95; 22 | var member = members[key]; 23 | if (member && typeof member === 'object') { 24 | if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') { 25 | if (member.enumerable === undefined) { 26 | member.enumerable = enumerable; 27 | } 28 | properties = properties || {}; 29 | properties[key] = member; 30 | continue; 31 | } 32 | } 33 | // These next lines will be deleted 34 | if (!enumerable) { 35 | properties = properties || {}; 36 | properties[key] = { value: member, enumerable: enumerable, configurable: true, writable: true } 37 | continue; 38 | } 39 | target[key] = member; 40 | } 41 | if (properties) { 42 | Object.defineProperties(target, properties); 43 | } 44 | } 45 | 46 | (function (rootNamespace) { 47 | 48 | // Create the rootNamespace in the global namespace 49 | if (!global[rootNamespace]) { 50 | global[rootNamespace] = Object.create(Object.prototype); 51 | } 52 | 53 | // Cache the rootNamespace we just created in a local variable 54 | var _rootNamespace = global[rootNamespace]; 55 | if (!_rootNamespace.Namespace) { 56 | _rootNamespace.Namespace = Object.create(Object.prototype); 57 | } 58 | 59 | function defineWithParent (parentNamespace, name, members) { 60 | /// 61 | /// Defines a new namespace with the specified name, under the specified parent namespace. 62 | /// 63 | /// 64 | /// The parent namespace which will contain the new namespace. 65 | /// 66 | /// 67 | /// Name of the new namespace. 68 | /// 69 | /// 70 | /// Members in the new namespace. 71 | /// 72 | /// 73 | /// The newly defined namespace. 74 | /// 75 | var currentNamespace = parentNamespace, 76 | namespaceFragments = name.split("."); 77 | 78 | for (var i = 0, len = namespaceFragments.length; i < len; i++) { 79 | var namespaceName = namespaceFragments[i]; 80 | if (!currentNamespace[namespaceName]) { 81 | Object.defineProperty(currentNamespace, namespaceName, 82 | { value: {}, writable: false, enumerable: true, configurable: true } 83 | ); 84 | } 85 | currentNamespace = currentNamespace[namespaceName]; 86 | } 87 | 88 | if (members) { 89 | initializeProperties(currentNamespace, members); 90 | } 91 | 92 | return currentNamespace; 93 | } 94 | 95 | function define (name, members) { 96 | /// 97 | /// Defines a new namespace with the specified name. 98 | /// 99 | /// 100 | /// Name of the namespace. This could be a dot-separated nested name. 101 | /// 102 | /// 103 | /// Members in the new namespace. 104 | /// 105 | /// 106 | /// The newly defined namespace. 107 | /// 108 | return defineWithParent(global, name, members); 109 | } 110 | 111 | // Establish members of the "WinJS.Namespace" namespace 112 | Object.defineProperties(_rootNamespace.Namespace, { 113 | 114 | defineWithParent: { value: defineWithParent, writable: true, enumerable: true }, 115 | 116 | define: { value: define, writable: true, enumerable: true } 117 | 118 | }); 119 | 120 | })("WinJS"); 121 | 122 | (function (WinJS) { 123 | 124 | function define (constructor, instanceMembers, staticMembers) { 125 | /// 126 | /// Defines a class using the given constructor and with the specified instance members. 127 | /// 128 | /// 129 | /// A constructor function that will be used to instantiate this class. 130 | /// 131 | /// 132 | /// The set of instance fields, properties and methods to be made available on the class. 133 | /// 134 | /// 135 | /// The set of static fields, properties and methods to be made available on the class. 136 | /// 137 | /// 138 | /// The newly defined class. 139 | /// 140 | constructor = constructor || function () { }; 141 | if (instanceMembers) { 142 | initializeProperties(constructor.prototype, instanceMembers); 143 | } 144 | if (staticMembers) { 145 | initializeProperties(constructor, staticMembers); 146 | } 147 | return constructor; 148 | } 149 | 150 | function derive (baseClass, constructor, instanceMembers, staticMembers) { 151 | /// 152 | /// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter. 153 | /// 154 | /// 155 | /// The class to inherit from. 156 | /// 157 | /// 158 | /// A constructor function that will be used to instantiate this class. 159 | /// 160 | /// 161 | /// The set of instance fields, properties and methods to be made available on the class. 162 | /// 163 | /// 164 | /// The set of static fields, properties and methods to be made available on the class. 165 | /// 166 | /// 167 | /// The newly defined class. 168 | /// 169 | if (baseClass) { 170 | constructor = constructor || function () { }; 171 | var basePrototype = baseClass.prototype; 172 | constructor.prototype = Object.create(basePrototype); 173 | Object.defineProperty(constructor.prototype, "_super", { value: basePrototype }); 174 | Object.defineProperty(constructor.prototype, "constructor", { value: constructor }); 175 | if (instanceMembers) { 176 | initializeProperties(constructor.prototype, instanceMembers); 177 | } 178 | if (staticMembers) { 179 | initializeProperties(constructor, staticMembers); 180 | } 181 | return constructor; 182 | } else { 183 | return define(constructor, instanceMembers, staticMembers); 184 | } 185 | } 186 | 187 | function mix (constructor) { 188 | /// 189 | /// Defines a class using the given constructor and the union of the set of instance members 190 | /// specified by all the mixin objects. The mixin parameter list can be of variable length. 191 | /// 192 | /// 193 | /// A constructor function that will be used to instantiate this class. 194 | /// 195 | /// 196 | /// The newly defined class. 197 | /// 198 | constructor = constructor || function () { }; 199 | var i, len; 200 | for (i = 0, len = arguments.length; i < len; i++) { 201 | initializeProperties(constructor.prototype, arguments[i]); 202 | } 203 | return constructor; 204 | } 205 | 206 | // Establish members of "WinJS.Class" namespace 207 | WinJS.Namespace.define("WinJS.Class", { 208 | define: define, 209 | derive: derive, 210 | mix: mix 211 | }); 212 | 213 | })(WinJS); 214 | 215 | })(this); -------------------------------------------------------------------------------- /public/testCode2.js: -------------------------------------------------------------------------------- 1 | /* 2 | © Microsoft. All rights reserved. 3 | 4 | This library is supported for use in Windows Tailored Apps only. 5 | 6 | Build: 6.2.8100.0 7 | Version: 0.5 8 | */ 9 | 10 | // Here are some inserted lines 11 | // with some extra comments 12 | 13 | (function (global, undefined) { 14 | "use strict"; 15 | var definedVariable = {}; 16 | definedVariable.prop = 5; 17 | 18 | function initializeProperties (target, members) { 19 | var keys = Object.keys(members); 20 | var properties; 21 | var i, len; 22 | for (i = 0, len = keys.length; i < len; i++) { 23 | var key = keys[i]; 24 | var enumerable = key.charCodeAt(0) !== /*_*/95; 25 | var member = members[key]; 26 | if (member && typeof member === 'object') { 27 | if (member.value !== undefined || typeof member.get === 'function' || typeof member.set === 'function') { 28 | if (member.enumerable === undefined) { 29 | member.enumerable = enumerable; 30 | } 31 | properties = properties || {}; 32 | properties[key] = member; 33 | continue; 34 | } 35 | } 36 | target[key] = member; 37 | } 38 | if (properties) { 39 | Object.defineProperties(target, properties); 40 | } 41 | } 42 | 43 | (function (rootNamespace) { 44 | 45 | // Create the rootNamespace in the global namespace 46 | if (!global[rootNamespace]) { 47 | global[rootNamespace] = Object.create(Object.prototype); 48 | } 49 | 50 | // Cache the rootNamespace we just created in a local variable 51 | var _rootNamespace = global[rootNamespace]; 52 | if (!_rootNamespace.Namespace) { 53 | _rootNamespace.Namespace = Object.create(Object.prototype); 54 | } 55 | 56 | function defineWithParent (parentNamespace, name, members) { 57 | /// 58 | /// Defines a new namespace with the specified name, under the specified parent namespace. 59 | /// 60 | /// 61 | /// The parent namespace which will contain the new namespace. 62 | /// 63 | /// 64 | /// Name of the new namespace. 65 | /// 66 | /// 67 | /// Members in the new namespace. 68 | /// 69 | /// 70 | /// The newly defined namespace. 71 | /// 72 | var currentNamespace = parentNamespace, 73 | namespaceFragments = name.split("."); 74 | 75 | for (var i = 0, len = namespaceFragments.length; i < len; i++) { 76 | var namespaceName = namespaceFragments[i]; 77 | if (!currentNamespace[namespaceName]) { 78 | Object.defineProperty(currentNamespace, namespaceName, 79 | { value: {}, writable: false, enumerable: true, configurable: true } 80 | ); 81 | } 82 | currentNamespace = currentNamespace[namespaceName]; 83 | } 84 | 85 | if (members) { 86 | initializeProperties(currentNamespace, members); 87 | } 88 | 89 | return currentNamespace; 90 | } 91 | 92 | function define (name, members) { 93 | /// 94 | /// Defines a new namespace with the specified name. 95 | /// 96 | /// 97 | /// Name of the namespace. This could be a dot-separated nested name. 98 | /// 99 | /// 100 | /// Members in the new namespace. 101 | /// 102 | /// 103 | /// The newly defined namespace. 104 | /// 105 | return defineWithParent(global, name, members); 106 | } 107 | 108 | // Establish members of the "WinJS.Namespace" namespace 109 | Object.defineProperties(_rootNamespace.Namespace, { 110 | 111 | defineWithParent: { value: defineWithParent, writable: true, enumerable: true }, 112 | 113 | define: { value: define, writable: true, enumerable: true } 114 | 115 | }); 116 | 117 | })("WinJS"); 118 | 119 | (function (WinJS) { 120 | 121 | function define (constructor, instanceMembers, staticMembers) { 122 | /// 123 | /// Defines a class using the given constructor and with the specified instance members. 124 | /// 125 | /// 126 | /// A constructor function that will be used to instantiate this class. 127 | /// 128 | /// 129 | /// The set of instance fields, properties and methods to be made available on the class. 130 | /// 131 | /// 132 | /// The set of static fields, properties and methods to be made available on the class. 133 | /// 134 | /// 135 | /// The newly defined class. 136 | /// 137 | constructor = constructor || function () { }; 138 | if (instanceMembers) { 139 | initializeProperties(constructor.prototype, instanceMembers); 140 | } 141 | if (staticMembers) { 142 | initializeProperties(constructor, staticMembers); 143 | } 144 | return constructor; 145 | } 146 | 147 | function derive (baseClass, constructor, instanceMembers, staticMembers) { 148 | /// 149 | /// Uses prototypal inheritance to create a sub-class based on the supplied baseClass parameter. 150 | /// 151 | /// 152 | /// The class to inherit from. 153 | /// 154 | /// 155 | /// A constructor function that will be used to instantiate this class. 156 | /// 157 | /// 158 | /// The set of instance fields, properties and methods to be made available on the class. 159 | /// 160 | /// 161 | /// The set of static fields, properties and methods to be made available on the class. 162 | /// 163 | /// 164 | /// The newly defined class. 165 | /// 166 | if (baseClass) { 167 | constructor = constructor || function () { }; 168 | var basePrototype = baseClass.prototype; 169 | constructor.prototype = Object.create(basePrototype); 170 | Object.defineProperty(constructor.prototype, "_super", { value: basePrototype }); 171 | Object.defineProperty(constructor.prototype, "constructor", { value: constructor }); 172 | if (instanceMembers) { 173 | initializeProperties(constructor.prototype, instanceMembers); 174 | } 175 | if (staticMembers) { 176 | initializeProperties(constructor, staticMembers); 177 | } 178 | return constructor; 179 | } else { 180 | return define(constructor, instanceMembers, staticMembers); 181 | } 182 | } 183 | 184 | function mix (constructor) { 185 | /// 186 | /// Defines a class using the given constructor and the union of the set of instance members 187 | /// specified by all the mixin objects. The mixin parameter list can be of variable length. 188 | /// 189 | /// 190 | /// A constructor function that will be used to instantiate this class. 191 | /// 192 | /// 193 | /// The newly defined class. 194 | /// 195 | constructor = constructor || function () { }; 196 | var i, len; 197 | for (i = 0, len = arguments.length; i < len; i++) { 198 | initializeProperties(constructor.prototype, arguments[i]); 199 | } 200 | return constructor; 201 | } 202 | 203 | // Establish members of "WinJS.Class" namespace 204 | WinJS.Namespace.define("WinJS.Class", { 205 | define: define, 206 | derive: derive, 207 | mix: mix 208 | }); 209 | 210 | })(WinJS); 211 | 212 | })(this); -------------------------------------------------------------------------------- /src/App.vue: -------------------------------------------------------------------------------- 1 | 81 | 82 | 202 | 203 | 213 | -------------------------------------------------------------------------------- /src/assets/logo.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/Jason-chen-coder/Monaco-EasyCodeEditor/76e4f9a95cfaa3f8a3a659f6eda1cd9e94e367dd/src/assets/logo.png -------------------------------------------------------------------------------- /src/components/HelloWorld.vue: -------------------------------------------------------------------------------- 1 | 32 | 33 | 41 | 42 | 43 | 59 | -------------------------------------------------------------------------------- /src/components/monacoeditor.vue: -------------------------------------------------------------------------------- 1 | 8 | 9 | 116 | 117 | -------------------------------------------------------------------------------- /src/main.js: -------------------------------------------------------------------------------- 1 | import Vue from 'vue' 2 | import App from './App.vue' 3 | import element from 'element-ui' 4 | import 'element-ui/lib/theme-chalk/index.css'; 5 | 6 | Vue.config.productionTip = false 7 | Vue.use(element) 8 | new Vue({ 9 | render: h => h(App), 10 | }).$mount('#app') 11 | -------------------------------------------------------------------------------- /vue.config.js: -------------------------------------------------------------------------------- 1 | const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') 2 | module.exports = { 3 | publicPath: process.env.NODE_ENV === 'production'? '/Monaco-EasyCodeEditor/': '/', 4 | outputDir: 'dist', 5 | lintOnSave: true, 6 | configureWebpack: { 7 | plugins: [ 8 | new MonacoWebpackPlugin() 9 | ] 10 | } 11 | } 12 | --------------------------------------------------------------------------------