vite项目使用Monaco Editor

安装依赖

pnpm add monaco-editor

修改vite.config.ts

// vite.config.js
import {defineConfig} from "vite";


export default defineConfig({
	// ...其他配置，加下下面
    // 强制预构建插件包
    optimizeDeps: {
        include: [
            `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`
        ],
    }
});

新建一个文件夹

这个文件夹是组件文件

新建MonacoEditorType.ts文件

import { PropType } from 'vue'

export type Theme = 'vs' | 'hc-black' | 'vs-dark'
export type FoldingStrategy = 'auto' | 'indentation'
export type RenderLineHighlight = 'all' | 'line' | 'none' | 'gutter'
export interface Options {
    automaticLayout: boolean // 自适应布局
    foldingStrategy: FoldingStrategy // 折叠方式  auto | indentation
    renderLineHighlight: RenderLineHighlight // 行亮
    selectOnLineNumbers: boolean // 显示行号
    minimap: {
        // 关闭小地图
        enabled: boolean
    }
    readOnly: boolean // 只读
    fontSize: number // 字体大小
    scrollBeyondLastLine: boolean // 取消代码后面一大段空白
    overviewRulerBorder: boolean // 不要滚动条的边框
}

export const editorProps = {
    modelValue: {
        type: String as PropType<string>,
        default: null,
    },
    width: {
        type: [String, Number] as PropType<string | number>,
        default: '100%',
    },
    height: {
        type: [String, Number] as PropType<string | number>,
        default: '100%',
    },
    language: {
        type: String as PropType<string>,
        default: 'javascript',
    },
    theme: {
        type: String as PropType<Theme>,
        validator(value: string): boolean {
            return ['vs', 'hc-black', 'vs-dark'].includes(value)
        },
        default: 'vs',
    },
    options: {
        type: Object as PropType<Options>,
        default: function () {
            return {
                automaticLayout: true,
                foldingStrategy: 'indentation',
                renderLineHighlight: 'all',
                selectOnLineNumbers: true,
                minimap: {
                    enabled: true,
                },
                readOnly: false,
                fontSize: 16,
                scrollBeyondLastLine: false,
                overviewRulerBorder: false,
            }
        },
    },
}

新建index.vue文件

<template>
    <div ref="codeEditBox" class="codeEditBox"></div>
</template>
  
<script lang="ts">
import { defineComponent, onBeforeUnmount, onMounted, ref, watch } from 'vue'
import { editorProps } from './MonacoEditorType'
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'
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'
import * as monaco from 'monaco-editor'

export default defineComponent({
    name: 'monaco-editor',
    props: editorProps,
    emits: ['update:modelValue', 'change', 'editor-mounted'],
    setup(props, { emit }) {
        self.MonacoEnvironment = {
            getWorker(_: string, label: string) {
                if (label === 'json') {
                    return new jsonWorker()
                }
                if (['css', 'scss', 'less'].includes(label)) {
                    return new cssWorker()
                }
                if (['html', 'handlebars', 'razor'].includes(label)) {
                    return new htmlWorker()
                }
                if (['typescript', 'javascript'].includes(label)) {
                    return new tsWorker()
                }
                return new EditorWorker()
            },
        }
        let editor: monaco.editor.IStandaloneCodeEditor
        const codeEditBox = ref()

        const init = () => {
            monaco.languages.typescript.javascriptDefaults.setDiagnosticsOptions({
                noSemanticValidation: true,
                noSyntaxValidation: false,
            })
            monaco.languages.typescript.javascriptDefaults.setCompilerOptions({
                target: monaco.languages.typescript.ScriptTarget.ES2020,
                allowNonTsExtensions: true,
            })

            editor = monaco.editor.create(codeEditBox.value, {
                value: props.modelValue,
                language: props.language,
                theme: props.theme,
                ...props.options,
            })

            // 监听值的变化
            editor.onDidChangeModelContent(() => {
                const value = editor.getValue() //给父组件实时返回最新文本
                emit('update:modelValue', value)
                emit('change', value)
            })

            emit('editor-mounted', editor)
        }
        watch(
            () => props.modelValue,
            newValue => {
                if (editor) {
                    const value = editor.getValue()
                    if (newValue !== value) {
                        editor.setValue(newValue)
                    }
                }
            }
        )

        watch(
            () => props.options,
            newValue => {
                editor.updateOptions(newValue)
            },
            { deep: true }
        )

        watch(
            () => props.language,
            newValue => {
                monaco.editor.setModelLanguage(editor.getModel()!, newValue)
            }
        )

        onBeforeUnmount(() => {
            editor.dispose()
        })

        onMounted(() => {
            init()
        })

        return { codeEditBox }
    },
})
</script>
<style lang="less" scoped>
.codeEditBox {
    width: v-bind(width);
    height: v-bind(height);
}
</style>

使用

引用

<template>
    <div class="container">
        <monaco-editor v-model="content" />
    </div>
</template>
<script lang="ts" setup>
import {ref} from 'vue';
import MonacoEditor from '@/components/monaco-editor/index.vue';

const contnet = ref('')
</script>
<style>
.container {
    height: 400px;
    widht: 300px;
}
</style>

注意：组件的高宽默认100%，理论上会撑满父元素，所以建议父元素设置宽高，或者绝对定位，也可以传入宽高，比如：<monaco-editor v-model="content" width="400px" height="500px" />