Vue接入Monaco Editer代码编辑器

Monaco Editer 代码编辑器

Monaco Editer是微软开发 VScode同款编辑器，功能非常多，几乎可以覆盖页面级代码编辑器的所有使用场景，本文将基于Vite+Vue3封装一个简易的代码编辑器Demo。

• 仓库地址：https://github.com/CatiiHuang/VueCodeEditerDemo.git
• 支持双向绑定与config动态配置
• 支持[ ‘javascript’, ‘json’, ‘css’, ‘html’, ‘typescript’ ]代码自动补全，代码高亮
• 更多配置请看官网：https://microsoft.github.io/monaco-editor/

组件代码

代码自动补全Worker挂载 (./hooks/dependencies.js)

目前官方库仅支持以下语言，更多自定义配置可以查看官方文档

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';import * as monaco from 'monaco-editor';self.MonacoEnvironment = {getWorker(_, label) {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();},
};export default monaco;

引用组件

本文来自互联网用户投稿，文章观点仅代表作者本人，不代表本站立场，不承担相关法律责任。如若转载，请注明出处。 如若内容造成侵权/违法违规/事实不符，请点击【内容举报】进行投诉反馈！