响应式网站 软件成都网站建设yingrihe

响应式网站 软件,成都网站建设yingrihe,网站域名备案 更改,各个广告联盟的标识前言相信大家在做一些低代码平台的项目时#xff0c;都会涉及到一些在线IDE代码编辑的功能吧#xff0c;比如通过在线代码编辑后实现在线运行代码效果.本篇给大家分享一下作者个人在开发低代码平台时如何实现如下图所示的 vscode在线代码IDE编辑功能的吧一、安装相关插件pnpm…前言相信大家在做一些低代码平台的项目时都会涉及到一些在线IDE代码编辑的功能吧比如通过在线代码编辑后实现在线运行代码效果.本篇给大家分享一下作者个人在开发低代码平台时如何实现如下图所示的vscode在线代码IDE编辑功能的吧一、安装相关插件pnpm add monaco-editor pnpm add monaco-editor-vue3因为是在Vue3项目中所以这里直接使用monaco-editor-vue3这个插件会更加便捷二、新增一个monaco.ts 配置文件这个很重要在安装完插件后其实我们这样直接在页面中引入就可以使用了但是这个时候页面其实会有报错的大概就是提示你monaco-editor相关配置没有处理template div styleheight: 400px; width: 800px CodeEditorv-model:valuecode languagejavascript themevs-dark :height600 :optionseditorOptions / /div /template script setup import { ref } from vue; import { CodeEditor } from monaco-editor-vue3; const code ref(function hello() { console.log(Hello, Monaco Editor!); }); const editorOptions { fontSize: 14, minimap: { enabled: false }, automaticLayout: true, }; /script这时候我们需要创建一个monaco.ts文件并添加以下配置内容import editorWorker from monaco-editor/esm/vs/editor/editor.worker?worker; import htmlWorker from monaco-editor/esm/vs/language/html/html.worker?worker; import cssWorker from monaco-editor/esm/vs/language/css/css.worker?worker; import jsonWorker from monaco-editor/esm/vs/language/json/json.worker?worker; import tsWorker from monaco-editor/esm/vs/language/typescript/ts.worker?worker; import * as monaco from monaco-editor; declare global { interface Window { MonacoEnvironment?: { getWorker: (moduleId: string, label: string) Worker; }; } } (self as Window).MonacoEnvironment { getWorker(_: string, 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(); }, };同时在main.ts中引入monaco.tsimport App from ./App.vue; import /utils/monaco type AppInstance AppTypeElement; const app: AppInstance createApp(App); app.mount(#app);界面ok配置成功后界面内容大概就是这样自定义主题如果你觉得编辑器默认的主题样式不太好看也可以自定义主题样式这里简单的配置一下依旧在monaco.ts中添加代码// 定义符合项目系统的自定义主题 const customTheme: monaco.editor.IStandaloneThemeData { base: vs-dark, // 基于官方暗色主题 inherit: true, // 继承默认语法高亮规则 rules: [ { token: comment, foreground: 617b91, fontStyle: italic }, // 注释呈现斜体灰蓝 { token: keyword, foreground: c5cceb, fontStyle: bold }, // 关键字加粗淡紫 { token: string, foreground: a9b1d6 }, // 字符串淡蓝 { token: number, foreground: c5cceb }, // 数字淡紫 { token: operator, foreground: c7cacf }, // 运算符浅灰 { token: delimiter, foreground: c7cacf }, // 分隔符浅灰 { token: type, foreground: c5cceb }, // 类型标识淡紫 { token: class, foreground: c5cceb }, // 类名淡紫 { token: function, foreground: a9b1d6 }, // 函数名淡蓝 { token: variable, foreground: c5cceb }, // 变量名淡紫 ], colors: { editor.background: #252837, // 编辑器背景 editor.foreground: #c5cceb, // 默认前景文字 editor.lineHighlightBackground: #29344c, // 当前行高亮背景 editor.inactiveSelectionBackground: rgba(69, 137, 255, 0.15), // 未激活选区背景 editorCursor.foreground: #c5cceb, // 光标颜色 editorWhitespace.foreground: #535f79, // 空白字符提示色 editorIndentGuide.background: #535f79, // 缩进指示线 editorIndentGuide.activeBackground: #a9b1d6, // 活动缩进指示线 editorLineNumber.foreground: #617b91, // 行号默认颜色 editorLineNumber.activeForeground: #c5cceb, // 当前行号颜色 editorGutter.background: #252837, // 行号区域背景 editorWidget.background: #29344c, // 弹出组件背景 editorWidget.border: #535f79, // 弹出组件边框 editorSuggestWidget.background: #29344c, // 智能提示背景 editorSuggestWidget.border: #535f79, // 智能提示边框 }, }; // 注册自定义主题 monaco.editor.defineTheme(custom-dark, customTheme);界面效果monaco.ts 完整的配置import editorWorker from monaco-editor/esm/vs/editor/editor.worker?worker; import htmlWorker from monaco-editor/esm/vs/language/html/html.worker?worker; import cssWorker from monaco-editor/esm/vs/language/css/css.worker?worker; import jsonWorker from monaco-editor/esm/vs/language/json/json.worker?worker; import tsWorker from monaco-editor/esm/vs/language/typescript/ts.worker?worker; import * as monaco from monaco-editor; declare global { interface Window { MonacoEnvironment?: { getWorker: (moduleId: string, label: string) Worker; }; } } (self as Window).MonacoEnvironment { getWorker(_: string, 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(); }, }; // 定义符合项目系统的自定义主题 const customTheme: monaco.editor.IStandaloneThemeData { base: vs-dark, // 基于官方暗色主题 inherit: true, // 继承默认语法高亮规则 rules: [ { token: comment, foreground: 617b91, fontStyle: italic }, // 注释呈现斜体灰蓝 { token: keyword, foreground: c5cceb, fontStyle: bold }, // 关键字加粗淡紫 { token: string, foreground: a9b1d6 }, // 字符串淡蓝 { token: number, foreground: c5cceb }, // 数字淡紫 { token: operator, foreground: c7cacf }, // 运算符浅灰 { token: delimiter, foreground: c7cacf }, // 分隔符浅灰 { token: type, foreground: c5cceb }, // 类型标识淡紫 { token: class, foreground: c5cceb }, // 类名淡紫 { token: function, foreground: a9b1d6 }, // 函数名淡蓝 { token: variable, foreground: c5cceb }, // 变量名淡紫 ], colors: { editor.background: #252837, // 编辑器背景 editor.foreground: #c5cceb, // 默认前景文字 editor.lineHighlightBackground: #29344c, // 当前行高亮背景 editor.inactiveSelectionBackground: rgba(69, 137, 255, 0.15), // 未激活选区背景 editorCursor.foreground: #c5cceb, // 光标颜色 editorWhitespace.foreground: #535f79, // 空白字符提示色 editorIndentGuide.background: #535f79, // 缩进指示线 editorIndentGuide.activeBackground: #a9b1d6, // 活动缩进指示线 editorLineNumber.foreground: #617b91, // 行号默认颜色 editorLineNumber.activeForeground: #c5cceb, // 当前行号颜色 editorGutter.background: #252837, // 行号区域背景 editorWidget.background: #29344c, // 弹出组件背景 editorWidget.border: #535f79, // 弹出组件边框 editorSuggestWidget.background: #29344c, // 智能提示背景 editorSuggestWidget.border: #535f79, // 智能提示边框 }, }; // 注册自定义主题 monaco.editor.defineTheme(custom-dark, customTheme);总结以上就是作者个人在Vue3项目中集成 monaco.editor 的过程总体来说也是非常的简单大概就是分三步流程实现1.安装monaco-editor和monaco-editor-vue3插件2.新增和引入monaco.ts文件3.在页面中使用CodeEditor