当前位置: 首页 > news >正文

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. 效果

在这里插入图片描述

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

相关文章:

Vue3 集成Monaco Editor编辑器

Vue3 集成Monaco Editor编辑器 1. 安装依赖2. 使用3. 效果 Monaco Editor &#xff08;官方链接 https://microsoft.github.io/monaco-editor/&#xff09;是一个由微软开发的功能强大的在线代码编辑器&#xff0c;被广泛应用于各种 Web 开发场景中。以下是对 Monaco Editor 的…...

一文详解Mysql索引

背景 索引是存储引擎用于快速找到一条记录的数据结构。索引对良好的性能非常关键。尤其是当表中的数据量越来越大时&#xff0c;索引对性能的影响愈发重要。接下来&#xff0c;就来详细探索一下索引。 索引是什么 索引&#xff08;Index&#xff09;是帮助数据库高效获取数据的…...

基于JAVA+SpringBoot+Vue的旅游管理系统

基于JAVASpringBootVue的旅游管理系统 前言 ✌全网粉丝20W,csdn特邀作者、博客专家、CSDN[新星计划]导师、java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和毕业项目实战✌ &#x1f345;文末附源码下载链接&#x1f345; 哈喽兄…...

STM32_实验3_控制RGB灯

HAL_Delay 是 STM32 HAL 库中的一个函数&#xff0c;用于在程序中产生一个指定时间的延迟。这个函数是基于系统滴答定时器&#xff08;SysTick&#xff09;来实现的&#xff0c;因此可以实现毫秒级的延迟。 void HAL_Delay(uint32_t Delay); 配置引脚&#xff1a; 点击 1 到 IO…...

RISC-V笔记——Pipeline依赖

1. 前言 RISC-V的RVWMO模型主要包含了preserved program order、load value axiom、atomicity axiom、progress axiom和I/O Ordering。今天主要记录下preserved program order(保留程序顺序)中的Pipeline Dependencies(Pipeline依赖)。 2. Pipeline依赖 Pipeline依赖指的是&a…...

构建后端为etcd的CoreDNS的容器集群(六)、编写自动维护域名记录的代码脚本

本文为系列测试文章&#xff0c;拟基于自签名证书认证的etcd容器来构建coredns域名解析系统。 一、前置文章 构建后端为etcd的CoreDNS的容器集群&#xff08;一&#xff09;、生成自签名证书 构建后端为etcd的CoreDNS的容器集群&#xff08;二&#xff09;、下载最新的etcd容…...

Leetcode 剑指 Offer II 098.不同路径

题目难度: 中等 原题链接 今天继续更新 Leetcode 的剑指 Offer&#xff08;专项突击版&#xff09;系列, 大家在公众号 算法精选 里回复 剑指offer2 就能看到该系列当前连载的所有文章了, 记得关注哦~ 题目描述 一个机器人位于一个 m x n 网格的左上角 &#xff08;起始点在下…...

LabVIEW智能螺杆空压机测试系统

基于LabVIEW软件开发的螺杆空压机测试系统利用虚拟仪器技术进行空压机的性能测试和监控。系统能够实现对螺杆空压机关键性能参数如压力、温度、流量、转速及功率的实时采集与分析&#xff0c;有效提高测试效率与准确性&#xff0c;同时减少人工操作&#xff0c;提升安全性。 项…...

在 Ubuntu 22.04 上安装 PHP 8.2

在 Ubuntu 22.04 上安装 PHP 8.2&#xff0c;可以按照以下步骤进行&#xff1a; 更新系统软件包&#xff1a; 首先&#xff0c;确保你的系统软件包是最新的。 sudo apt update sudo apt upgrade 安装 PHP PPA&#xff08;Personal Package Archive&#xff09;&#xff1a; U…...

Java生死簿管理小系统(简单实现)

学习总结 1、掌握 JAVA入门到进阶知识(持续写作中……&#xff09; 2、学会Oracle数据库入门到入土用法(创作中……&#xff09; 3、手把手教你开发炫酷的vbs脚本制作(完善中……&#xff09; 4、牛逼哄哄的 IDEA编程利器技巧(编写中……&#xff09; 5、面经吐血整理的 面试技…...

【VoceChat】一个即时聊天(IM)软件,又是一个可以嵌入任何网页聊天系统

为什么要搭建私人聊天软件 在当今数字化时代&#xff0c;聊天软件已经成为人们日常沟通和协作的重要工具。市面上的公共聊天平台虽然方便&#xff0c;但也伴随着诸多隐私、安全、广告和功能限制的问题。对于那些注重数据安全、追求高效沟通的个人或团队来说&#xff0c;搭建一…...

【LeetCode】动态规划—96. 不同的二叉搜索树(附完整Python/C++代码)

动态规划—96. 不同的二叉搜索树 题目描述前言基本思路1. 问题定义2. 理解问题和递推关系二叉搜索树的性质&#xff1a;核心思路&#xff1a;状态定义&#xff1a;状态转移方程&#xff1a;边界条件&#xff1a; 3. 解决方法动态规划方法&#xff1a;伪代码&#xff1a; 4. 进一…...

Nginx UI 一个可以管理Nginx的图形化界面工具

Nginx UI 是一个基于 Web 的图形界面管理工具&#xff0c;支持对 Nginx 的各项配置和状态进行直观的操作和监控。 Nginx UI 的功能非常丰富&#xff1a; 在线查看服务器 CPU、内存、系统负载、磁盘使用率等指标 在线 ChatGPT 助理 一键申请和自动续签 Let’s encrypt 证书 在…...

Vue向上滚动加载数据时防止内容闪动

目前的需求&#xff1a;当前组件向上滚动加载数据&#xff0c;dom加载完后&#xff0c;页面的元素位置不能发生变化 遇到的问题&#xff1a;加载完数据后&#xff0c;又把滚轮滚到之前记录的位置时&#xff0c;内容发生闪动 现在的方案&#xff1a; 加载数据之前记录整体滚动条…...

基于QT、ARM的智能停车管理系统+高分项目+源码

Parking-management-system 本系统基于QT、ARM开发板、Linux系统并对接百度AI 1.1 项目目的: 创建一个智能停车管理系统&#xff0c;能够停入车辆和取出车辆以及查询车辆停入停车场的状态并且计算车辆离开时收费情况。 1.2 项目意义: 实现停车场智能抬杆和智能收费系统&…...

1.6,unity动画Animator屏蔽某个部位,动画组合

动画组合 一边跑一边攻击 using System.Collections; using System.Collections.Generic; using UnityEngine;public class One : MonoBehaviour {private Animator anim;// Start is called before the first frame updatevoid Start(){anim GetComponent<Animator>();…...

发动机冷却系统排空气

发动机冷却系统排空气的几种常见方法 发动机冷却系统是汽车发动机的重要组成部分&#xff0c;它的主要作用是通过循环冷却液来吸收和散发发动机产生的热量&#xff0c;确保发动机在正常工作温度下运行。然而&#xff0c;在冷却系统的运行过程中&#xff0c;由于各种原因&#…...

三周精通FastAPI:1 第一步入门

FastAPI是一个非常棒的python web和api框架&#xff0c;准备用三周的时间“精通它” 学习流程参考FastAPI官网的用户教程&#xff1a;教程 - 用户指南 - FastAPI 学前提示 运行代码 所有代码片段都可以复制后直接使用&#xff08;它们实际上是经过测试的 Python 文件&#x…...

RestTemplate基本使用之HTTP实现GET请求和POST请求

一、GET请求实例 public static TianQi getTianQi(String city) {RestTemplate restTemplate new RestTemplate();HashMap res restTemplate.getForObject("http://www.tianqiapi.com/api/?versionv6&appid15118158&appsecretgVNnwva8&city" city, H…...

2024-10-18 问AI: [AI面试题] 神经网络有哪些不同类型?

文心一言 神经网络有多种不同类型&#xff0c;每种类型都有其特定的结构和应用场景。以下是一些主要的神经网络类型&#xff1a; 前馈神经网络&#xff08;FNN&#xff09;&#xff1a; 也称为全连接神经网络或感知器网络。由输入层、隐藏层和输出层组成&#xff0c;信息流是单…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

springboot 百货中心供应链管理系统小程序

一、前言 随着我国经济迅速发展&#xff0c;人们对手机的需求越来越大&#xff0c;各种手机软件也都在被广泛应用&#xff0c;但是对于手机进行数据信息管理&#xff0c;对于手机的各种软件也是备受用户的喜爱&#xff0c;百货中心供应链管理系统被用户普遍使用&#xff0c;为方…...

【人工智能】神经网络的优化器optimizer(二):Adagrad自适应学习率优化器

一.自适应梯度算法Adagrad概述 Adagrad&#xff08;Adaptive Gradient Algorithm&#xff09;是一种自适应学习率的优化算法&#xff0c;由Duchi等人在2011年提出。其核心思想是针对不同参数自动调整学习率&#xff0c;适合处理稀疏数据和不同参数梯度差异较大的场景。Adagrad通…...

Zustand 状态管理库:极简而强大的解决方案

Zustand 是一个轻量级、快速和可扩展的状态管理库&#xff0c;特别适合 React 应用。它以简洁的 API 和高效的性能解决了 Redux 等状态管理方案中的繁琐问题。 核心优势对比 基本使用指南 1. 创建 Store // store.js import create from zustandconst useStore create((set)…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

反射获取方法和属性

Java反射获取方法 在Java中&#xff0c;反射&#xff08;Reflection&#xff09;是一种强大的机制&#xff0c;允许程序在运行时访问和操作类的内部属性和方法。通过反射&#xff0c;可以动态地创建对象、调用方法、改变属性值&#xff0c;这在很多Java框架中如Spring和Hiberna…...

Pinocchio 库详解及其在足式机器人上的应用

Pinocchio 库详解及其在足式机器人上的应用 Pinocchio (Pinocchio is not only a nose) 是一个开源的 C 库&#xff0c;专门用于快速计算机器人模型的正向运动学、逆向运动学、雅可比矩阵、动力学和动力学导数。它主要关注效率和准确性&#xff0c;并提供了一个通用的框架&…...

GitFlow 工作模式(详解)

今天再学项目的过程中遇到使用gitflow模式管理代码&#xff0c;因此进行学习并且发布关于gitflow的一些思考 Git与GitFlow模式 我们在写代码的时候通常会进行网上保存&#xff0c;无论是github还是gittee&#xff0c;都是一种基于git去保存代码的形式&#xff0c;这样保存代码…...

论文阅读:LLM4Drive: A Survey of Large Language Models for Autonomous Driving

地址&#xff1a;LLM4Drive: A Survey of Large Language Models for Autonomous Driving 摘要翻译 自动驾驶技术作为推动交通和城市出行变革的催化剂&#xff0c;正从基于规则的系统向数据驱动策略转变。传统的模块化系统受限于级联模块间的累积误差和缺乏灵活性的预设规则。…...

沙箱虚拟化技术虚拟机容器之间的关系详解

问题 沙箱、虚拟化、容器三者分开一一介绍的话我知道他们各自都是什么东西&#xff0c;但是如果把三者放在一起&#xff0c;它们之间到底什么关系&#xff1f;又有什么联系呢&#xff1f;我不是很明白&#xff01;&#xff01;&#xff01; 就比如说&#xff1a; 沙箱&#…...