Vue3 集成Monaco Editor编辑器

Vue3 集成Monaco Editor编辑器

    • 1. 安装依赖
    • 2. 使用
    • 3. 效果

Monaco Editor （官方链接 https://microsoft.github.io/monaco-editor/）是一个由微软开发的功能强大的在线代码编辑器，被广泛应用于各种 Web 开发场景中。以下是对 Monaco Editor 的详细介绍：
强大的功能特性
多语言支持：
Monaco Editor 支持众多编程语言，包括但不限于 JavaScript、TypeScript、Python、Java、C++、C# 以及常见SQL、HTML、YML、XML、格式等等几十种。它提供了针对不同语言的语法高亮、代码补全、错误提示和智能感知等功能，大大提高了开发效率。
对于每种语言，都有专门的语法解析器和语言服务，确保代码的准确性和可读性。

主题定制：
提供了丰富的内置主题，如默认的 “vs”（Visual Studio 风格）、“vs-dark” 等，同时也支持用户自定义主题。
用户可以根据自己的喜好调整编辑器的颜色、字体大小、对比度等，以适应不同的工作环境和个人需求。

1. 安装依赖

npm 安装

npm install monaco-editor

package.json

{"name": "vue-monaco-demo","private": true,"version": "0.0.0","type": "module","scripts": {"dev": "vite","build": "vite build","preview": "vite preview"},"dependencies": {"monaco-editor": "^0.52.0","vue": "^3.5.10"},"devDependencies": {"@vitejs/plugin-vue": "^5.1.4","vite": "^5.4.8"}
}

2. 使用

App.vue
演示使用我就直接在 里写了

<script setup>// 导入monaco编辑器import * as monaco from 'monaco-editor';import {ref, onMounted, onUnmounted} from 'vue'// 编辑器容器divconst editorContainer = ref(null);// 编辑器实列const editor = ref(null);// 编辑器内容const code = ref('')// 初始化编辑器onMounted(() => {if (editorContainer.value) {// 创建编辑器实列editor.value = monaco.editor.create(editorContainer.value, {value: `import * as monaco from'monaco-editor';import { ref, onMounted, onUnmounted } from 'vue'const editorContainer = ref(null);const editor = ref(null);onMounted(() => {if (editorContainer.value) {editor.value = monaco.editor.create(editorContainer.value, {value: '// 这里是初始代码',language: 'javascript',theme: 'vs-dark',readOnly: false});}});onUnmounted(() => {if (editor.value) {editor.value.dispose();}});`, // 编辑器初始内容language: 'javascript', // 编辑器语言theme: 'vs-dark', // 编辑器主题 默认vs-dark VSCode 黑色主题,可选：vs、vs-dark、hc-black、hc-lightreadOnly: false, // 是否只读内容不可编辑readOnlyMessage:{value:"不可以修改哦",supportThemeIcons:true,supportHtml:true}, // 为只读时编辑内日提示词codeLens: true, // 代码透镜folding: true, // 代码折叠snippetSuggestions: 'inline', // 代码提示tabCompletion: 'on', // 代码提示按tab完成foldingStrategy: 'auto', // 折叠策略smoothScrolling: true, // 滚动动画// inDiffEditor: 是否在差异编辑器中使用// ariaLabel: 编辑器文本区域的无障碍标签// ariaRequired: 是否设置 aria-required 属性// screenReaderAnnounceInlineSuggestion: 是否立即宣布内联建议内容// tabIndex: 编辑器文本区域的 tabindex 属性// rulers: 指定位置渲染垂直线// wordSegmenterLocales: 用于词分割的语言// wordSeparators: 词导航时使用的分隔符// selectionClipboard: 启用 Linux 主剪贴板// lineNumbers: 控制行号的显示方式// cursorSurroundingLines: 控制光标周围的可见行数// cursorSurroundingLinesStyle: 控制何时强制执行 cursorSurroundingLines// renderFinalNewline: 渲染文件末尾的新行// unusualLineTerminators: 移除不寻常的行终止符// selectOnLineNumbers: 单击行号时选择相应行// lineNumbersMinChars: 控制行号的最小字符数// glyphMargin: 启用渲染图符边距// lineDecorationsWidth: 行装饰的宽度// revealHorizontalRightPadding: 水平方向显示光标时的虚拟填充// roundedSelection: 选择是否带有圆角// extraEditorClassName: 添加到编辑器的类名// readOnly: 编辑器是否只读// readOnlyMessage: 只读模式下的提示信息// domReadOnly: 输入文本框是否使用 DOM 的 readonly 属性// linkedEditing: 启用关联编辑// renderValidationDecorations: 是否渲染验证装饰// scrollbar: 控制滚动条的行为和渲染// stickyScroll: 控制粘性滚动选项// minimap: 控制最小地图的行为和渲染// find: 控制查找小部件的行为// fixedOverflowWidgets: 以 fixed 方式显示溢出小部件// overviewRulerLanes: 概览尺子应渲染的车道数// overviewRulerBorder: 是否绘制概览尺子边框// cursorBlinking: 光标闪烁风格// mouseWheelZoom: 使用鼠标滚轮结合 Ctrl 键缩放字体// mouseStyle: 鼠标指针样式// cursorSmoothCaretAnimation: 平滑光标动画// cursorStyle: 光标样式// cursorWidth: 光标宽度// fontLigatures: 启用字体连字// fontVariations: 启用字体变体// defaultColorDecorators: 是否使用默认颜色装饰// disableLayerHinting: 禁用编辑器层提示// disableMonospaceOptimizations: 禁用等宽字体优化// hideCursorInOverviewRuler: 是否在概览尺子中隐藏光标// scrollBeyondLastLine: 启用滚动到最后行// scrollBeyondLastColumn: 启用滚动到最后列// smoothScrolling: 启用平滑滚动// automaticLayout: 启用自动布局// wordWrap: 控制自动换行// wordWrapOverride1: 覆盖 wordWrap 设置// wordWrapOverride2: 覆盖 wordWrapOverride1 设置// wordWrapColumn: 换行列数// wrappingIndent: 控制换行的缩进// wrappingStrategy: 控制换行策略// wordWrapBreakBeforeCharacters: 换行前的字符// wordWrapBreakAfterCharacters: 换行后的字符// wordBreak: 控制单词换行// stopRenderingLineAfter: 停止渲染行的位置// hover: 配置编辑器的悬浮提示// links: 启用链接检测// colorDecorators: 启用内联颜色装饰// colorDecoratorsActivatedOn: 触发颜色选择器的条件// colorDecoratorsLimit: 内联颜色装饰的最大数量// comments: 控制编辑器中的注释行为// contextmenu: 启用自定义上下文菜单// mouseWheelScrollSensitivity: 鼠标滚轮滚动灵敏度// fastScrollSensitivity: 快速滚动速度// scrollPredominantAxis: 启用主要轴滚动// columnSelection: 启用列选择// multiCursorModifier: 添加多个光标的修饰键// multiCursorMergeOverlapping: 合并重叠的选择// multiCursorPaste: 配置粘贴多个文本时的行为// multiCursorLimit: 控制同时可以存在的最大文本光标数量// accessibilitySupport: 配置编辑器的无障碍支持// accessibilityPageSize: 屏幕阅读器可读取的行数// suggest: 建议选项// inlineSuggest: 内联建议选项// experimentalInlineEdit: 实验性内联编辑选项// smartSelect: 智能选择选项// gotoLocation: 跳转到位置选项// quickSuggestions: 启用快速建议// quickSuggestionsDelay: 快速建议显示延迟// padding: 控制编辑器的边距// parameterHints: 参数提示选项// autoClosingBrackets: 自动闭合括号的选项// autoClosingComments: 自动闭合注释的选项// autoClosingQuotes: 自动闭合引号的选项// autoClosingDelete: 自动闭合删除的选项// autoClosingOvertype: 自动闭合覆盖的选项// autoSurround: 自动环绕的选项// autoIndent: 控制自动缩进// stickyTabStops: 插入和删除空白时遵循制表符停止// formatOnType: 启用输入时格式化// formatOnPaste: 启用粘贴时格式化// dragAndDrop: 允许通过拖放移动选择// suggestOnTriggerCharacters: 在触发字符上弹出建议框// acceptSuggestionOnEnter: 在 Enter 键上接受建议的方式// acceptSuggestionOnCommitCharacter: 在提供者定义的字符上接受建议// snippetSuggestions: 启用片段建议// emptySelectionClipboard: 无选择时复制当前行// copyWithSyntaxHighlighting: 复制时包含语法高亮// suggestSelection: 建议的历史模式// suggestFontSize: 建议小部件的字体大小// suggestLineHeight: 建议小部件的行高// tabCompletion: 启用 Tab 完成// selectionHighlight: 启用选择高亮// occurrencesHighlight: 启用语义发生高亮// codeLens: 显示代码透镜// codeLensFontFamily: 代码透镜的字体系列// codeLensFontSize: 代码透镜的字体大小// lightbulb: 控制代码操作灯泡的行为// codeActionsOnSaveTimeout: 保存时运行代码操作的超时时间// folding: 启用代码折叠// foldingStrategy: 选择折叠策略// foldingHighlight: 启用折叠区域高亮// foldingImportsByDefault: 默认折叠导入区域// foldingMaximumRegions: 最大可折叠区域数// showFoldingControls: 折叠控制的显示方式// unfoldOnClickAfterEndOfLine: 单击折行后展开// matchBrackets: 启用匹配括号高亮// experimentalWhitespaceRendering: 实验性空白渲染// renderWhitespace: 渲染空白字符// renderControlCharacters: 渲染控制字符// renderLineHighlight: 渲染当前行高亮// renderLineHighlightOnlyWhenFocus: 仅当编辑器聚焦时渲染当前行高亮// useTabStops: 插入和删除空白时遵循制表符停止// fontFamily: 字体系列// fontWeight: 字体粗细// fontSize: 字体大小// lineHeight: 行高// letterSpacing: 字母间距// showUnused: 控制未使用变量的高亮// peekWidgetDefaultFocus: 默认聚焦预览窗口的小部件// placeholder: 编辑器为空时显示的占位符// definitionLinkOpensInPeek: 定义链接是否在预览窗口中打开// showDeprecated: 控制废弃变量的高亮// matchOnWordStartOnly: 是否允许单词中间匹配// inlayHints: 控制内联提示的行为和渲染});// 编辑器内容变更时回调editor.value.onDidChangeModelContent(() => {console.log('编辑器内容变更')// 获取编辑器内容// editor.value.getValue();})}});// 当组件被卸载时调用该回调函数onUnmounted(() => {// 检查 editor 是否已初始化if (editor.value) {// 清理 editor 资源，避免内存泄漏editor.value.dispose();}});</script><template><div ref="editorContainer" ></div>
</template><style scoped>
*{height: 100vh;width: 100vh;
}
</style>

3. 效果

在这里插入图片描述

这里只演示如何使用，实际开发中可以将编辑器封装成一个组件，方便复用

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.mzph.cn/web/55568.shtml

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

人大金仓 V8 数据库环境设置与 Spring Boot 集成配置指南

人大金仓 V8 数据库环境设置与 Spring Boot 集成配置指南

人大金仓 V8 数据库环境设置与 Spring Boot 集成配置指南 本文介绍了如何设置人大金仓 V8 数据库&#xff0c;并与 Spring Boot 应用程序进行集成。首先&#xff0c;讲解了如何通过 ksql 命令行工具创建用户、数据库&#xff0c;并授予权限。同时&#xff0c;文章展示了如何加…
阅读更多...
【设计模式】深入理解Python中的抽象工厂设计模式

【设计模式】深入理解Python中的抽象工厂设计模式

深入理解Python中的抽象工厂设计模式 设计模式是软件开发中解决常见问题的经典方案&#xff0c;而**抽象工厂模式&#xff08;Abstract Factory Pattern&#xff09;**是其中非常重要的一种创建型模式。抽象工厂模式的主要作用是提供一个接口&#xff0c;创建一系列相关或依赖…
阅读更多...
HTML5教程（三）- 常用标签

HTML5教程（三）- 常用标签

1 文本标签-h 标题标签&#xff08;head&#xff09;&#xff1a; 自带加粗效果&#xff0c;从h1到h6字体大小逐级递减一个标题独占一行 语法 <h1>一级标题</h1><h2>二级标题</h2><h3>三级标题</h3><h4>四级标题</h4><h5…
阅读更多...
vLLM 部署大模型问题记录

vLLM 部署大模型问题记录

文章目录 部署前置工作下载 vLLM Docker 镜像下载模型 Qwen2.5-72B-Instruct-GPTQ-Int4启动指令接口文档地址&#xff1a;http://localhost:8001/docs问题记录 Llama-3.2-11B-Vision-Instruct启动指令接口文档地址&#xff1a;http://localhost:8001/docs问题记录 Qwen2-Audio-…
阅读更多...
关于md5强比较和弱比较绕过的实验

关于md5强比较和弱比较绕过的实验

在ctf比赛题中我们的md5强弱比较的绕过题型很多&#xff0c;大部分都是结合了PHP来进行一个考核。这一篇文章我将讲解一下最基础的绕过知识。 MD5弱比较 比较的步骤 在进行弱比较时&#xff0c;PHP会按照以下步骤执行&#xff1a; 确定数据类型&#xff1a;检查参与比较的两…
阅读更多...
jmeter响应断言放进csv文件遇到的问题

jmeter响应断言放进csv文件遇到的问题

用Jmeter的json 断言去测试http请求响应结果&#xff0c;发现遇到中文时出现乱码&#xff0c;导致无法正常进行响应断言&#xff0c;很影响工作。于是&#xff0c;察看了其他测试人员的解决方案&#xff0c;发现是jmeter本身对编码格式的设置导致了这一问题。解决方案是在jmete…
阅读更多...
【文化课学习笔记】【化学】选必三：同分异构体的书写

【文化课学习笔记】【化学】选必三：同分异构体的书写

【化学】选必三&#xff1a;同分异构体的书写 如果你是从 B 站一化儿笔记区来的&#xff0c;请先阅读我在第一篇有机化学笔记中的「读前须知」(点开头的黑色小三角展开)&#xff1a;链接 链状烃的取代和插空法 取代法 一取代物 甲烷、乙烷、丙烷、丁烷的种类 甲烷&#xff1a;只…
阅读更多...
Java中集合类型的转换

Java中集合类型的转换

在Java编程中&#xff0c;集合框架&#xff08;Collections Framework&#xff09;提供了一套用于存储和处理对象集合的接口和类。由于集合框架的灵活性和强大功能&#xff0c;我们经常需要在不同的集合类型之间进行转换。本文将介绍Java中常见的集合类型转换方法&#xff0c;包…
阅读更多...
游戏逆向基础-找释放技能CALL

游戏逆向基础-找释放技能CALL

思路&#xff1a;通过send断点然后对send的data参数下写入断点找到游戏里面的技能或者攻击call 进入游戏先选好一个怪物&#xff08;之所以要先选好是因为选怪也会断&#xff0c;如果直接左键打怪的话就会断几次&#xff09; 断下来后对参数下硬件写入断点 硬件断点断下来后先…
阅读更多...
如何用pyhton修改1000+图片的名字？

如何用pyhton修改1000+图片的名字？

import os oldpath input("请输入文件路径&#xff08;在windows中复制那个图片文件夹的路径就可以):") #注意window系统中的路径用这个‘\分割&#xff0c;但是编程语言中一般都是正斜杠也就是’/‘ #这里写一个代码&#xff0c;将 \ > / path "" fo…
阅读更多...
基于SpringBoot+Vue+uniapp的海产品加工销售一体化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)

基于SpringBoot+Vue+uniapp的海产品加工销售一体化管理系统的详细设计和实现(源码+lw+部署文档+讲解等)

详细视频演示 请联系我获取更详细的视频演示 项目运行截图 技术框架 后端采用SpringBoot框架 Spring Boot 是一个用于快速开发基于 Spring 框架的应用程序的开源框架。它采用约定大于配置的理念&#xff0c;提供了一套默认的配置&#xff0c;让开发者可以更专注于业务逻辑而不…
阅读更多...
6 机器学习之应用现状

6 机器学习之应用现状

在过去二十年中&#xff0c;人类收集、存储、传输、处理数据的能力取得了飞速提升&#xff0c;人类社会的各个角落都积累了大量数据&#xff0c;亟需能有效地对数据进行分析利用的计算机算法&#xff0c;而机器学习恰顺应了大时代的这个迫切需求&#xff0c;因此该学科领域很自…
阅读更多...
基于FPGA的DDS信号发生器（图文并茂+深度原理解析）

基于FPGA的DDS信号发生器（图文并茂+深度原理解析）

篇幅有限，本文详细源文件已打包 至个人主页资源，需要自取...... 前言 DDS（直接数字合成）技术是先进的频率合成手段，在数字信号处理与硬件实现领域作用关键。它因低成本、低功耗、高分辨率以及快速转换时间等优点备受认可。 本文着重探究基于 FPGA 的简易 DDS 信号发生器设…
阅读更多...
交叉熵损失 在PyTorch 中的计算过程

交叉熵损失 在PyTorch 中的计算过程

其实就是根据 真实值的结果&#xff0c;当成索引去取的值 import torch import torch.nn as nnaaaa torch.tensor([[2.0,1.0,3.0],[2.0,4.0,2.0]])l1 nn.LogSoftmax(dim-1) result l1(aaaa) print(result) import torch import torch.nn as nn# 定义交叉熵损失函数 criterio…
阅读更多...
数据治理为何如此简单？

数据治理为何如此简单？

欢迎来文末免费获取数据治理相关PPT和文档 引言 随着大数据技术的迅速发展&#xff0c;企业积累的数据量呈现爆炸式增长。有效的数据管理已经成为企业提高决策效率、增强竞争优势的重要手段。在这样的背景下&#xff0c;数据治理逐渐成为企业数据管理中不可或缺的一环。它不仅…
阅读更多...
JS中Array的常用方法

JS中Array的常用方法

文章目录 1. 创建和初始化数组2. 添加和删除元素3. 查找元素4. 遍历数组5. 数组转换6. 排序和反转7. 其他方法 JavaScript 中的 Array 对象提供了许多常用的方法&#xff0c;这些方法可以帮助你更方便地操作数组。以下是一些常用的 Array 方法及其用法&#xff1a; 1. 创建和…
阅读更多...
实时计算Flink应用场景

实时计算Flink应用场景

实时计算Flink应用场景 Flink是一个开源的流处理和批处理框架&#xff0c;具有低延迟、高吞吐、容错性强等特点&#xff0c;适用于大规模的实时数据处理和分析。它能够处理包括事件流、日志、传感器数据等各种类型的数据&#xff0c;因此在多个行业和领域有着广泛的应用。以下…
阅读更多...
ABB主调制解调器（DSTC130）

ABB主调制解调器（DSTC130）

‌ABB控制调解器是一种用于工业自动化控制的设备&#xff0c;具有高性能、易于编程和配置、易于集成、高可靠性和维护方便等特点。‌ 它采用先进的控制算法和数据处理技术&#xff0c;能够实现高精度的控制和监测&#xff0c;快速响应系统的变化&#xff0c;提高系统的稳定性和…
阅读更多...
查看SQL执行计划 explain

查看SQL执行计划 explain

查看SQL执行计划 explain explain使用方式 alter session set current_schematest; explain plan for sql语句; --并不会实际执行&#xff0c;因此生成的执行计划也是预估的 select * from table(dbms_xplan.display); explain使用场景 1.内存中没有谓词信息了&#xff0…
阅读更多...
[Javase]深入理解跨平台原理

[Javase]深入理解跨平台原理

文章目录 一、Java 跨平台原理深度解析二、代码的编译与解释1、编译型语言2、解释型语言 三、Java 跨平台的核心 —— 虚拟机1、什么是虚拟机2、为什么能实现跨平台 四、JDK&#xff1a;Java 开发的强大工具包1、JDK 的介绍2、JDK 的重要组件 五、JRE&#xff1a;Java 运行的基…
阅读更多...
最新文章

Copyright @ 2022~2023