编辑器组件monaco

1、配置代码编辑器子组件monaco.js

<!-- 代码编辑器组件 -->
<template>
    <!-- 使用monaco-editor之前，需要先准备一个容器来挂载monaco-editor实例 -->
    <div ref="editerWrap" class="code-editer-wrap"></div>
</template>

<script setup lang="ts">
//依赖挂载
import monaco from './dependencies';
import { computed, onMounted, ref, watch } from 'vue';

//编辑器实例值
let codeEditer: any = null;
//拿到编辑器实例dom
const editerWrap = ref(null);

//拿到父传子的属性
const props = defineProps({
    modelValue: {
        type: String,
        default: '',
    },
    config: {
        type: Object,
        default: () => ({
            value: ``,
            fontSize: 14,
            readOnly: false,
            language: 'javascript',
        }),
    }
})
const emits = defineEmits(['change', 'update:modelValue', 'blur', 'focus']);

//编辑器实例配置
const codeEditerConfig = computed(() =>
    // Object.assign(target, ...sources),将所有可枚举属性的值从一个或多个源对象复制到目标对象。它将返回目标对象。
    Object.assign({
        value: props.modelValue,//编辑器的值
        fontsize: 14,
        readOnly:true,
        language: 'json',//语言
        automaticLayout: true,
        scrollBeyondLastLine: false,
        overviewRulerBorder: false,
    },props.config )
           
);
//初始化编辑器
const initCodeEditer = () => {
    // 使用monaco.editor.create方法创建monaco.editor实例，第一个参数接收一个dom元素实例
    codeEditer =  monaco.editor.create(editerWrap.value, codeEditerConfig.value)
};

//内容变化监听
const initCodeChange = () => {
    codeEditer.onDidChangeModelContent(() => {
        //获取内容
        const value = getCodeEditerValue();
        emits('update:modelValue', value);
        emits('change',value);
    })
}
//获取内容
const getCodeEditerValue = () => codeEditer.getValue();

//焦点变化监听
const blurAndFocusMoniter = () => {
    codeEditer.onDidBlurEditorText((e) => {
        emits('blur', e);
    });
    codeEditer.onDidFocusEditorText((e) => {
        emits('focus', e);
    })

}

//设置内容
const setCodeEditerValue = (val) => codeEditer.setValue(val);
//格式化代码
const codeEditerFormat = () => codeEditer.trigger('anything', 'editor.action.formatDocument')
// 属性或方法必须暴露出去， 父组件才能用
defineExpose({ codeEditerFormat,setCodeEditerValue });

onMounted(() => {
    initCodeEditer();//初始化编辑器
    initCodeChange(); //内容变化监听
    blurAndFocusMoniter(); //焦点变化监听


})


//更新配置
const updateCodeEditerConfig = () => {
    codeEditer.updateOptions(codeEditerConfig.value);
    console.log(codeEditerConfig.value);
};

//双向绑定，更新编辑器内容
watch(
    () => props.modelValue,
    (val) => {
        if (val !== getCodeEditerValue())
           setCodeEditerValue(val);
    }
);

//监听配置修改
watch(
    () => props.config,
    () => {
        if(codeEditer) updateCodeEditerConfig();
    },{immediate: true, deep: true}
);

//监听语言配置变更
watch(
    () => props.config.language,
    (val) => {
        if(codeEditer) monaco.editor.setModelLanguage(codeEditer.getModel(), val);
    },{ immediate: true, deep: true}
);
</script>

2、在父组件中使用：

<CodeEditer ref="monaco" v-model="codeEditerValue" class="code-editer-box" :config="codeEditerConfig"
            style="height:80vh;width:600px"></CodeEditer>

import CodeEditer from '@/components/monaco/gjManacoEditor.vue';

const monaco = ref();


const state = reactive({
    codeEditerValue: "",
    codeEditerConfig: {
        fontSize: 14,
        language: 'json',
        theme: 'vs',
    },
});

const {
    codeEditerValue,
    codeEditerConfig,
} = toRefs(state);