├── .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 |
99 |
104 |
105 |
165 |
166 | ```
167 |
168 | 2) **App.vue**
169 |
170 | ```html
171 |
172 |
173 |
174 |
175 |

180 |
Easy-CodeEditor
181 |
182 | 语言:
183 |
190 |
196 |
197 |
198 | 样式风格:
199 |
206 |
212 |
213 |
214 | 获取内容
217 |
218 |
219 |
220 |
221 |
227 |
228 |
229 |
230 |
328 |
338 |
339 |
340 | ```
341 | ##### 2.3.3.3 效果:
342 |
343 | 
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 | 
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 | 
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 |
2 |
3 |
4 |

9 |
Easy-CodeEditor
10 |
11 |
12 | 样式风格:
13 |
19 |
25 |
26 |
27 |
34 |
35 |
36 |
行内比较
42 |
43 | 语言:
44 |
50 |
56 |
57 |
58 | 获取内容
65 |
66 |
67 |
68 |
69 |
70 |
78 |
79 |
80 |
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 |
2 |
3 |
{{ msg }}
4 |
5 | For a guide and recipes on how to configure / customize this project,
6 | check out the
7 | vue-cli documentation.
8 |
9 |
Installed CLI Plugins
10 |
14 |
Essential Links
15 |
22 |
Ecosystem
23 |
30 |
31 |
32 |
33 |
41 |
42 |
43 |
59 |
--------------------------------------------------------------------------------
/src/components/monacoeditor.vue:
--------------------------------------------------------------------------------
1 |
2 |
7 |
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 |
--------------------------------------------------------------------------------