网上看到的都需要另外的插件 看了下官网案例 发现并不需要 首先引入依赖: npm install monaco-editor 组件中使用: import * as monaco from 'monaco-editor' import editorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker'; 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';
onMounted(() => { initEditor(); }) const initEditor = () => { self.MonacoEnvironment = { getWorker(_: any, label: string) { if (label === 'json') { return new jsonWorker(); } if (label === 'css' || label === 'scss' || label === 'less') { return new cssWorker(); } if (label === 'html' || label === 'handlebars' || label === 'razor') { return new htmlWorker(); } if (label === 'typescript' || label === 'javascript') { return new tsWorker(); } return new editorWorker(); } }; monaco.editor.create(codeEditBox.value, { value: props.contentValue, theme: 'vs-dark', //官方自带三种主题vs, hc-black, or vs-dark language: 'javascript' }); }
dom结构:
<div class="content-box"> <div ref="codeEditBox" class="code-edit-box"></div> <iframe ref="ifreamName" frameborder="0" width="50vw" height="100vh" :srcdoc = 'contentHtml + "<script>" + contentValue + "</script>"'></iframe> </div>
获取值:
const runFn = () => { emit("update:contentValue", toRaw(codeEditBox.value).getValue()); ifreamName.value.contentWindow.location.reload(true); }