什么是Monaco Editor?
微软之前有个项目叫做Monaco Workbench,后来这个项目变成了VSCode,而Monaco Editor(下文简称monaco)就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码(monaco-editor-core)都是共用的,所以monaco和VSCode在编辑代码,交互以及UI上几乎是一摸一样的,有点不同的是,两者的平台不一样,monaco基于浏览器,而VSCode基于electron,所以功能上VSCode更加健全,并且性能比较强大。
开始使用
首先,我们需要安装monaco-editor和monaco-editor-webpack-plugin
npm install monaco-editor@0.30.0 -S
npm install monaco-editor-webpack-plugin@6.0.0 -D
然后进入vite.config.js文件,以下为代码片段
增加const MonacoWebpackPlugin = require(‘monaco-editor-webpack-plugin’);
和
configureWebpack: {
plugins: [
new MonacoWebpackPlugin({ languages: [‘python’,‘javascript’, ‘typescript’, ‘html’, ‘css’, ‘json’] })
]
},
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
const MonacoPlugin = require('monaco-editor-webpack-plugin');
export default defineConfig({
plugins: [vue(),new MonacoPlugin({ languages: ['python','javascript', 'typescript', 'html', 'css', 'json'] })],
)}
创建页面
接下来就可以直接开始使用了
记得导入才能使用
import * as monaco from 'monaco-editor';
<template>
<div class="Content">
<div ref="monacoEditorContainer" style="width:100%;height: 100%;"></div>
</div>
</template>
<script lang="ts" setup>
import * as monaco from 'monaco-editor';
const monacoEditorContainer = ref(<any>null);
let editorInstance = ref(<any>null)
// 编辑器初始化
const editor = () => {
editorInstance = monaco.editor.create(monacoEditorContainer.value, {
theme: "vs-dark",
value: '',
language: "python",
folding: true,
foldingHighlight: true,
foldingStrategy: "indentation",
showFoldingControls: "always",
disableLayerHinting: true,
emptySelectionClipboard: false,
selectionClipboard: false,
automaticLayout: true,
codeLens: false,
scrollBeyondLastLine: false,
colorDecorators: true,
accessibilitySupport: "off",
lineNumbers: "on",
lineNumbersMinChars: 5,
// enableSplitViewResizing: false,
readOnly: false,
});
}
// 获取编辑器内输入的内容
const getEditorContent=()=>{
if (editorInstance) {
const content = editorInstance.getValue();
return content
}
}
onMounted(() => {
editor()
});
<script/>
进入页面,使用editor函数初始化编辑器,调用getEditorContent函数可以获取当前编辑器的内容,使用setValue函数可以给编辑器赋值
//给编辑器赋值
editorInstance.setValue("hello,world")
好了,快去试试吧。