前言：在meta2d可视化编辑器中，对于从mqtt获取的消息，需要自定义解析函数，但我并不想写在代码里，而是想把函数体部分的代码放到前端编辑器中实现。对此，需要用到monaco实现代码编辑器
1. 安装依赖
npm install monaco-editor
2.安装vite插件
npm install --save-dev vite-plugin-monaco-editor
3.配置vite.config.js文件
import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
export default defineConfig({
plugins: [monacoEditorPlugin()],
});
4.编辑器组件
<template>
<div>
<div id="editorContainer" ref="editorContainer" style="min-height: 200px;width: 100%"></div>
</div>
</template>
<script setup>
import * as monaco from 'monaco-editor'; // 全部导入
import { ref, onMounted } from 'vue';
const editor = ref(null);
// 定义从父组件接收的属性
const props = defineProps({
// option: Object
// 代码内容
value: {
type:String,
default: ''
},
// 代码语言
language:{
type: String,
default: 'javascript'
}
})
onMounted(() => {
editor.value = monaco.editor.create(document.getElementById('editorContainer'), {
value: 'return true;',
language: 'javascript',
minimap: {
enabled: true,
},
colorDecorators: true, //颜色装饰器
readOnly: false, //是否开启已读功能
theme: "vs-dark", //主题
automaticLayout: true,//自适应大小
insertSpaces: true,
});
// 监听编辑器内容变化
editor.value.onDidChangeModelContent(() => {
// 触发父组件的 change 事件，通知编辑器内容变化
// props.onChange(getVal);
});
});
const getVal = () => {
return toRaw(editor.value).getValue(); //获取编辑器中的文本
}
</script>
5.父组件（弹窗弹出编辑器）
<el-dialog v-model="showEditor" title="JavaScript">
<CodeEditor @change="handleEditorChange"/>
<template #footer>
<span class="dialog-footer">
<el-button @click="showEditor = false">Cancel</el-button>
<el-button type="primary" @click="showEditor = false"
>Confirm</el-button
>
</span>
</template>
</el-dialog>
