vue3+vite简单搞搞Monaco-Editor

一、简介

简单理解为运行在浏览器上的vscode

二、简单使用

// 安装 
npm install monaco-editor 

// 初始化编辑器 
const monacoEditor = monaco.editor.create(targetDom, { // 初始化的dom节点
    value: '', // 初始化值     
    language: 'json', // 语言类型     
    theme: 'vs-dark', // 主题 
}); 

// 初始化编辑器的值 
monacoEditor.setValue(`{"key":"value"}`) 

// 获取件编辑器的值 
monacoEditor.getValue(); 

// 注销编辑器实例 
monacoEditor.dispose();

三、基于vue3的组件封装

<template>
    <div ref="editContainer" class="code-editor"></div>
</template>
<script>
import { getCurrentInstance, onMounted, watch } from 'vue';
import * as monaco from 'monaco-editor/esm/vs/editor/editor.main.js';
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
// 解决vite Monaco提示错误
self.MonacoEnvironment = {
    getWorker() {
        return new JsonWorker();
    },
};
export default {
    props: {
        value: String,
    },
    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(proxy.$refs.editContainer, {
                value: props.value,
                readOnly: false,
                language: 'json',
                theme: 'vs-dark',
                selectOnLineNumbers: true,
                renderSideBySide: false,
            });
            // 监听值变化
            monacoEditor.onDidChangeModelContent(() => {
                const currenValue = monacoEditor?.getValue();
                emit('update:value', currenValue);
            });
        });
        return {};
    },
};
</script>
<style scoped>
.code-editor {
    width: 100%;
    min-height: 200px;
}
</style>

四、使用vite作为打包工具时遇到的坑

问题： 编辑器无法使用语法检测

原因：没有引用到worker文件

解决：手动引入worker文件，具体可以看官网integrate-esm.md或者由大的回复issue

五、使用webpack作为打包工具时遇到的坑

问题： 打包构建时失败

原因： monaco的ttf文件无法引用文件

解决：同样官网也给出了解决方式，需要使用monaco-editor-plugin插件，并且修改webpack.conf.js的配置，详情地址