monacoEditor使用原创
基于vue3 + vite4 + element-plus
官网： https://github.com/microsoft/monaco-editor
演示： https://microsoft.github.io/monaco-editor/playground.html?source=v0.40.0#example-creating-the-editor-hello-world
# 1. 安装
npm install monaco-editor
1
# 2. 组件封装
<template>
<div id="editContainer" ref="editContainer" class="code-editor"></div>
</template>
<script>
import { getCurrentInstance, onMounted, watch } from 'vue';
import * as monaco from 'monaco-editor';
import 'monaco-editor/esm/vs/basic-languages/css/css.contribution'
import 'monaco-editor/esm/vs/basic-languages/xml/xml.contribution'
import 'monaco-editor/esm/vs/basic-languages/javascript/javascript.contribution'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker'
import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker'
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker'
import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker'
// 解决vite Monaco提示错误
/** editorSimpleWorker.js:454 Uncaught (in promise) Error: Unexpected usage
at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js:454)
at webWorker.js:38
**/
self.MonacoEnvironment = {
getWorker(_, label) {
if (label === 'json') {
return new JsonWorker()
}
if (label === 'css' || label === 'scss' || label === 'less') {
return new CssWorker()
}
if (label === 'html' || label === 'handlebars' || label === 'razor') {
return new HtmlWorker()
}
if (label === 'typescript' || label === 'javascript') {
return new TsWorker()
}
return new EditorWorker()
}
}
export default {
name: 'MonacoEditor',
props: {
value: {
type:String,
default: ''
},
language: {
type: String,
default: 'HTML'
},
theme: {
type: String,
default: 'vs-dark'
},
readOnly : {
type: Boolean,
default: false
},
options: {
type: Object
}
},
emits: ['update:value'],
setup(props, { emit }) {
let monacoEditor = null;
const { proxy } = getCurrentInstance();
watch(
() => props.value,
(value) => {
// 防止改变编辑器内容时光标重定向
if (value !== monacoEditor?.getValue()) {
monacoEditor.setValue(value);
}
},
);
onMounted(() => {
monacoEditor = monaco.editor.create(document.getElementById('editContainer'), {
value: props.value,
language: props.language,
readOnly: props.readOnly,
theme: props.theme,
selectOnLineNumbers: true,
renderSideBySide: false,
minimap: {
enabled: false,
},
wordWrap: "on",
});
// 监听值变化
monacoEditor.onDidChangeModelContent(() => {
const currenValue = monacoEditor?.getValue();
emit('update:value', currenValue);
});
});
watch(
() => props.value,
newValue => {
if (monacoEditor) {
const value = monacoEditor.getValue()
if (newValue !== value) {
monacoEditor.setValue(newValue)
}
}
}
)
watch(
() => props.readOnly,
() => {
monacoEditor.updateOptions({ readOnly: props.readOnly })
},
{ deep: true }
)
//切换语言
watch(
() => props.language,
newValue => {
monaco.editor.setModelLanguage(monacoEditor.getModel(), newValue)
}
)
watch(
() => props.options,
newValue => {
monacoEditor.updateOptions(newValue)
},
{ deep: true }
)
onBeforeUnmount(() => {
monacoEditor.dispose() // 销毁编辑器
})
return {};
},
};
</script>
<style scoped>
.code-editor {
width: 100%;
min-height: 300px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
# 3. 使用
<template>
<div class="app-container">
<div>
<el-link
href="https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite"
type="primary"
target="_blank"
class="mb-[20px]"
>示例源码 请点击>>>></el-link
>
</div>
<el-row class="row-bg" justify="end" style="flex-wrap:wrap;flex-direction: row" align="bottom">
<el-col :span="15">
<span>切换语言</span>
<el-select v-model="lang" class="m-2" placeholder="Select" size="large">
<el-option
v-for="item in options"
:key="item.value"
:value="item.value"
/>
</el-select>
</el-col>
<el-col :span="9">
<el-button type="primary" class="m-2" style="width: 200px;height: 40px" siza="large">提交代码</el-button>
</el-col>
</el-row>
<MonacoEditor
:value = value
:language="lang"
:read-only="isSubmit"
@update:value = handleChange
></MonacoEditor>
</div>
</template>
<script setup lang="ts">
import MonacoEditor from '@/components/MonacoEditor/index.vue'
const value = ref("");
const isSubmit = ref(false)
const lang = ref('java')
const options = [
{
value: 'java',
},
{
value: 'html',
},
{
value: 'typescript',
},
{
value: 'json',
},
{
value: 'dockerfile',
},
{
value: 'c',
},
{
value: 'javascript',
},
]
function handleChange(newValue: string) {
value.value = newValue
}
</script>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
# 4. vite.config.ts配置
export default defineConfig(({ mode }: ConfigEnv): UserConfig => {
const prefix = `monaco-editor/esm/vs`;
build: {
rollupOptions: {
output: {
manualChunks: {
jsonWorker: [`${prefix}/language/json/json.worker`],
cssWorker: [`${prefix}/language/css/css.worker`],
htmlWorker: [`${prefix}/language/html/html.worker`],
tsWorker: [`${prefix}/language/typescript/ts.worker`],
editorWorker: [`${prefix}/editor/editor.worker`],
},
},
},
},
// 预加载项目必需的组件
optimizeDeps: {
include: [
"vue",
"vue-router",
"pinia",
"axios",
"element-plus/es/components/form/style/css",
"element-plus/es/components/form-item/style/css",
"element-plus/es/components/button/style/css",
"element-plus/es/components/input/style/css",
"element-plus/es/components/input-number/style/css",
"element-plus/es/components/switch/style/css",
"element-plus/es/components/upload/style/css",
"element-plus/es/components/menu/style/css",
"element-plus/es/components/col/style/css",
"element-plus/es/components/icon/style/css",
"element-plus/es/components/row/style/css",
"element-plus/es/components/tag/style/css",
"element-plus/es/components/dialog/style/css",
"element-plus/es/components/loading/style/css",
"element-plus/es/components/radio/style/css",
"element-plus/es/components/radio-group/style/css",
"element-plus/es/components/popover/style/css",
"element-plus/es/components/scrollbar/style/css",
"element-plus/es/components/tooltip/style/css",
"element-plus/es/components/dropdown/style/css",
"element-plus/es/components/dropdown-menu/style/css",
"element-plus/es/components/dropdown-item/style/css",
"element-plus/es/components/sub-menu/style/css",
"element-plus/es/components/menu-item/style/css",
"element-plus/es/components/divider/style/css",
"element-plus/es/components/card/style/css",
"element-plus/es/components/link/style/css",
"element-plus/es/components/breadcrumb/style/css",
"element-plus/es/components/breadcrumb-item/style/css",
"element-plus/es/components/table/style/css",
"element-plus/es/components/tree-select/style/css",
"element-plus/es/components/table-column/style/css",
"element-plus/es/components/select/style/css",
"element-plus/es/components/option/style/css",
"element-plus/es/components/pagination/style/css",
"element-plus/es/components/tree/style/css",
"element-plus/es/components/alert/style/css",
"@vueuse/core",
"path-to-regexp",
"echarts",
"@wangeditor/editor",
"@wangeditor/editor-for-vue",
"vue-i18n",
"codemirror",
`monaco-editor/esm/vs/language/json/json.worker`,
`monaco-editor/esm/vs/language/css/css.worker`,
`monaco-editor/esm/vs/language/html/html.worker`,
`monaco-editor/esm/vs/language/typescript/ts.worker`,
`monaco-editor/esm/vs/editor/editor.worker`
],
},
})
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
上次更新: 2024/01/14 16:27:31
- 01
- element-plus多文件手动上传 原创11-03
- 02
- TrueLicense 创建及安装证书 原创10-25
- 03
- 手动修改迅捷配置 原创09-03
- 04
- 安装 acme.sh 原创08-29
- 05
- zabbix部署 原创08-20