包括 图标、国际化
html
<!doctype html>
<html class="dark">
<head>
<meta charset="utf-8" />
<title>Monaco Editor</title>
<!-- 导入样式 -->
<link rel="stylesheet" href="/element-plus/dist/index.css" />
<link rel="stylesheet" href="/element-plus/theme-chalk/dark/css-vars.css" />
<!-- 导入 Vue 3 -->
<script src="/vue@3.5.26/dist/vue.global.js"></script>
<!-- 导入组件库 ElementPlus-->
<script src="/element-plus/dist/index.full.js"></script>
<!-- 国际化 -->
<script src="/element-plus/dist/locale/zh-cn.js"></script>
<!-- 导入组件库 ElementPlusIconsVue -->
<script src="/element-plus/icons-vue/dist/index.iife.min.js"></script>
<!-- 引入Monaco Editor样式 -->
<link rel="stylesheet" data-name="vs/editor/editor.main" href="/monaco-editor/min/vs/editor/editor.main.min.css" />
<!-- 导入 define, require -->
<script src="/monaco-editor/min/vs/loader.js"></script>
<!-- 支持中文，先加载生效 -->
<script src="/monaco-editor/min/vs/nls.messages.zh-cn.js.js"></script>
<style>
body,
html {
margin: 0;
padding: 0;
height: 100%;
}
#app {
width: 100%;
height: 100vh;
display: flex;
/* flex-direction: column; */
}
#editor-container {
width: 100%;
height: inherit;
}
</style>
</head>
<body>
<div id="app">
<div>
<el-menu default-active="2" class="el-menu-vertical-demo" :collapse="isCollapse" @open="handleOpen" @close="handleClose">
<el-sub-menu index="1">
<template #title>
<el-icon><location /></el-icon>
<span>分组的</span>
</template>
<el-menu-item-group>
<template #title><span>组1</span></template>
<el-menu-item index="1-1">项目一</el-menu-item>
<el-menu-item index="1-2">项目二</el-menu-item>
</el-menu-item-group>
<el-menu-item-group title="组二">
<el-menu-item index="1-3">项目三</el-menu-item>
</el-menu-item-group>
<el-sub-menu index="1-4">
<template #title><span>项目四</span></template>
<el-menu-item index="1-4-1">项目四-1</el-menu-item>
</el-sub-menu>
</el-sub-menu>
<el-menu-item index="2">
<el-icon><icon-menu /></el-icon>
<!-- <el-icon><menu></menu></el-icon> -->
<template #title>导航二</template>
</el-menu-item>
<el-menu-item index="3" disabled>
<el-icon><document /></el-icon>
<template #title>导航三</template>
</el-menu-item>
<el-menu-item index="4">
<el-icon><setting /></el-icon>
<template #title>导航四</template>
</el-menu-item>
</el-menu>
</div>
<!-- Monaco Editor容器 -->
<div id="editor-container"></div>
</div>
<!-- Monaco Editor Loader -->
<script>
// AMD加载器配置
const requireConfig = {
paths: {
vs: '/monaco-editor/min/vs'
}
}
// 配置RequireJS
globalThis.require = window.require || window.parent.require
if (require) {
require.config(requireConfig)
initializeEditor()
} else {
debugger
// 动态创建RequireJS
const loaderScript = document.createElement('script')
loaderScript.src = 'https://cdn.jsdelivr.net/npm/requirejs@2.3.6/require.min.js'
loaderScript.onload = function () {
require.config(requireConfig)
initializeEditor()
}
document.head.appendChild(loaderScript)
}
function initializeEditor() {
require(['vs/editor/editor.main'], function () {
const container = document.getElementById('editor-container')
const editor = monaco.editor.create(container, {
value: `// Welcome to Monaco Editor
function hello() {
console.log('Hello, world!')
}`,
language: 'javascript',
theme: 'vs-dark',
// automaticLayout: true,
showFoldingControls: 'always',
lineNumbers: 'on', // 行号显示
minimap: { enabled: true }, //右侧小地图（可选）
lineNumbersMinChars: 3, // 确保行号栏宽度足够显示折叠图标
theme: 'vs-dark',
automaticLayout: true, // ✅ 启用自动布局
scrollBeyondLastLine: false,
folding: true,
showFoldingControls: 'always',
lineNumbers: 'on',
lineNumbersMinChars: 3,
wordWrap: 'off',
renderLineHighlight: 'all',
scrollbar: {
vertical: 'visible',
horizontal: 'visible',
useShadows: false
}
})
// 暴露给父窗口
window.editor = editor
// 手动触发一次布局
setTimeout(() => {
editor.layout()
}, 100)
// 使用ResizeObserver监听容器尺寸变化（更可靠）
if (typeof ResizeObserver !== 'undefined') {
resizeObserver = new ResizeObserver(() => {
console.log('容器尺寸变化')
if (editor) {
editor.layout()
}
})
resizeObserver.observe(container)
}
// // 监听窗口大小变化
// window.addEventListener('resize', () => {debugger;
// console.log("窗口大小变化");
// if (editor) {
// editor.layout();
// }
// });
})
}
// 监听父窗口消息
window.addEventListener('message', function (event) {
if (event.data.type === 'SET_VALUE') {
editor.setValue(event.data.value)
}
if (event.data.type === 'SET_LANGUAGE') {
monaco.editor.setModelLanguage(editor.getModel(), event.data.language)
}
if (event.data.type === 'LAYOUT') {
editor.layout()
}
})
</script>
<script>
const { createApp, ref } = Vue
const app = createApp({
setup() {
const isCollapse = ref(true)
const handleOpen = (key, keyPath) => {
console.log(key, keyPath)
}
const handleClose = (key, keyPath) => {
console.log(key, keyPath)
}
const message = ref('Hello vue!')
return {
message,
isCollapse,
handleOpen,
handleClose,
}
}
})
app.use(ElementPlus)
// 注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
console.log(key)
if(key === "Menu"){
app.component('icon-' + component.__name, component)
continue;
}
app.component(key, component)
}
app.mount('#app')
</script>
</body>
</html>