介绍

monaco-editor是微软的一款开源在线代码编辑器，vscode用的就是它。

安装

yarn add monaco-editor

引入

1. 首先可以创建一个初始化的js文件，引入和执行初始化逻辑

// user-worker.ts

import 'monaco-editor';
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';

// @ts-ignore
self.MonacoEnvironment = {
	getWorker(_: any, label: string) {
		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();
	}
};

这里，需要支持什么语言就引入什么语言，不一定非要全部引入，例如这里我只需要一个json编辑的能力。

这里的初始化逻辑是必须的，否则组件里创建的编辑器将不会有代码高亮格式化等能力

2. 在应用入口加载user-worker.ts

// main.ts （vue3项目的入口文件）
...
import './user-worker'
...

组件中使用

// editor.vue

<template>
    <div class="w-100% h-600px" id="editor-container"></div>
</template>

<script setup lang="ts">
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'

let myEditor: monaco.editor.IStandaloneCodeEditor

const createEditor = () => {
  myEditor = monaco.editor.create(document.getElementById('editor-container')!, {
    language: 'json',
    automaticLayout: true,
    theme: 'vs-dark'
  })
}

onMounted(() => {
  createEditor()
})
</script>

其它

其它更多功能请翻阅官方文档：

microsoft.github.io/monaco-edit…