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.xdnf.cn/news/1560636.html

如若内容造成侵权/违法违规/事实不符，请联系一条长河网进行投诉反馈，一经查实，立即删除！

相关文章

继承--C++

继承--C++

文章目录 一、继承的概念及定义1、继承的概念 二、继承定义1、定义格式2、继承基类成员访问方式的变化3、继承类模板 三、基类和派生类间的转换1、继承中的作用域2、隐藏规则&#xff1a; 四、派生类的默认成员函数1、4个常见默认成员函数2、实现⼀个不能被继承的类 五、继承与…
阅读更多...
基于s32ds平台指定变量储存位置

基于s32ds平台指定变量储存位置

开启一段ram空间 打开ld文件 配置一段ram空间 开辟一个段 .shareable_data1 : {. ALIGN(4);KEEP(*(.mcal_shared_data1)) . ALIGN(4);} > int_sram_shareable1定义一个变量并将变量指定在段中 volatile uint32 u32SbcmGenState __attribute__((section (".mcal_s…
阅读更多...
Spring MVC：精通JSON数据返回的几种高效方式

Spring MVC：精通JSON数据返回的几种高效方式

前言 在实际开发中&#xff0c;我们在前后端传送数据通常使用Json格式&#xff0c;而在Spring MVC中返回Json格式的方式有多种&#xff0c;接下来我将介绍其中一些。 准备工作 为了演示Json格式的数据&#xff0c;我们准备一个实体类&#xff0c;例如User&#xff0c;这些可以测…
阅读更多...
HUAWEI_HCIA_实验指南_Lib2.1_交换机基础配置

HUAWEI_HCIA_实验指南_Lib2.1_交换机基础配置

1、原理概述 交换机之间通过以太网电接口对接时需要协商一些接口参数&#xff0c;比如速率、双工模式等。交换机的全双工是指交换机在发送数据的同时也能够接收数据&#xff0c;两者同时进行。就如平时打电话一样&#xff0c;说话的同时也能够听到对方的声音。而半双工指在同一…
阅读更多...
Json-Rpc框架（项目设计 —— 服务端客户端 模块功能划分简介）

Json-Rpc框架（项目设计 —— 服务端客户端 模块功能划分简介）

阅读导航 引言一、理解项目功能⭕分布式RPC服务发现/注册/订阅/创建 结构图⭕项目三大核心功能 二、服务端模块划分简介三、客户端模块划分简介 引言 在上一篇文章中&#xff0c;我们深入探讨了Json-Rpc框架中不可或缺的序列化与反序列化利器——JsonCpp库。 在本篇文章中&am…
阅读更多...
Github 2024-10-11 Java开源项目日报 Top9

Github 2024-10-11 Java开源项目日报 Top9

根据Github Trendings的统计，今日(2024-10-11统计)共有9个项目上榜。根据开发语言中项目的数量，汇总情况如下： 开发语言项目数量Java项目9TypeScript项目1Vue项目1C++项目1JeecgBoot 企业级低代码开发平台 创建周期：2062 天开发语言：Java, Vue协议类型：Apache License 2.…
阅读更多...
性能测试流程规范测试准备阶段

性能测试流程规范测试准备阶段

目录 1.目的 2.工作内容 3.材料 1)《性能测试脚本规范》。 2)《性能测试参数文件检查备份指南》。 3)《性能测试资源监控操作指南》。 4)《脚本开发参数化》。 5)《脚本开发异常捕获处理》。 6)测试脚本文件。 7)模拟器代码文件。 8)生产环境参数配置文件。 9)《XX…
阅读更多...
解决 IntelliJ IDEA 运行时 “Command line is too long“ 问题

解决 IntelliJ IDEA 运行时 “Command line is too long“ 问题

文章目录 文章标题&#xff1a;解决 IntelliJ IDEA 运行时 "Command line is too long" 问题简介问题描述解决方案代码示例代码示例1&#xff1a;使用JAR Manifest代码示例2&#xff1a;使用Classpath File代码示例3&#xff1a;优化项目依赖 结论进一步的资源 文章标…
阅读更多...
【C++入门篇 - 1】：C++编程等演示环境介绍

【C++入门篇 - 1】：C++编程等演示环境介绍

文章目录 C编程等演示环境介绍VS2022的下载创建项目运行一个基本程序 Visual Studio中程序的调试方法普通的断点调试调试时查看内存中的内容调试中查看反汇编窗口 开启isual Studio 2019对C最新标准的编译支持 C编程等演示环境介绍 VS2022的下载 官网&#xff1a;VS下载官网 …
阅读更多...
ProtoBuf 安装

ProtoBuf 安装

一、ProtoBuf 在 window 下的安装 1.1、下载 ProtoBuf 编译器 下载地址&#xff1a;https://github.com/protocolbuffers/protobuf/releases 可以不⽤下载最新版本&#xff0c;具体的下载根据电脑情况选择。 下载之后将压缩包解压到本地⽬录下。解压后的⽂件内包含 bin、in…
阅读更多...
利用网络流量分析仪进行网络故障排除：提升IT运维效率的关键工具

利用网络流量分析仪进行网络故障排除：提升IT运维效率的关键工具

目录 一、什么是网络流量分析仪&#xff1f; 主要功能&#xff1a; 二、为什么网络流量分析仪在网络故障排除中如此重要&#xff1f; 三、实际案例&#xff1a;使用网络流量分析仪快速排查网络故障 案例一&#xff1a;流量拥塞导致的带宽不足 案例二&#xff1a;服务器响…
阅读更多...
【Kubernets】容器网络基础二：通讲CNI（Container Network Interface）容器网络接口实现方案

【Kubernets】容器网络基础二：通讲CNI（Container Network Interface）容器网络接口实现方案

文章目录 背景知识Underlay网络Overlay网络一、基本概念二、工作原理三、实现方案四、应用场景 两者对比示意图 CNI实现有哪些&#xff1f;FlannelFlannel 的工作原理Flannel 的主要组件数据传输机制总结 Calico一、架构基础二、核心组件与功能三、路由与数据包转发四、安全策略…
阅读更多...
精华版80页PPT | 智能工厂数字化顶层架构

精华版80页PPT | 智能工厂数字化顶层架构

项目背景及需求理解 随着科技的飞速发展&#xff0c;智能工厂的概念逐渐从理论走向实践&#xff0c;成为制造业转型升级的重要方向。方案对智能工厂数字化顶层架构进行全面介绍。在当前的市场环境下&#xff0c;消费者需求日益多样化、个性化&#xff0c;对产品质量、价格、环…
阅读更多...
PMP--冲刺题--解题--121-130

PMP--冲刺题--解题--121-130

文章目录 9.资源管理--1.规划资源管理--可以直接使用排除法&#xff0c;A和C的做法都是逃避了组织和参与这个会议&#xff0c;D组织多次会议的做法明显不够高效。121、 [单选] 项目经理被指派与技术和运营团队一起负责现有产品新版本的设计。项目经理组织一次联合需求会议&…
阅读更多...
【拥抱AIGC】应该如何衡量AI辅助编程带来的收益

【拥抱AIGC】应该如何衡量AI辅助编程带来的收益

本文主要介绍了如何度量研发效能&#xff0c;以及AI辅助编程是如何影响效能的&#xff0c;进而阐述如何衡量AI辅助编程带来的收益。 理解度量&#xff1a;有效区分度量指标 为了帮助研发团队更好地理解和度量研发效能&#xff0c;可以将指标分为三类&#xff1a;能力和行为指…
阅读更多...
【C++入门篇 - 3】：从C到C++第二篇

【C++入门篇 - 3】：从C到C++第二篇

文章目录 从C到C第二篇new和delete命名空间命名空间的访问 cin和coutstring的基本使用 从C到C第二篇 new和delete 在C中用来向系统申请堆区的内存空间 New的作用相当于C语言中的malloc Delete的作用相当于C语言中的free 注意&#xff1a;在C语言中&#xff0c;如果内存不够…
阅读更多...
【数学分析笔记】第5章第1节 微分中值定理（1）

【数学分析笔记】第5章第1节 微分中值定理（1）

5. 微分中值定理及其应用 5.1 微分中值定理 5.1.1 极值与极值点 【定义5.1.1】 f ( x ) f(x) f(x)定义域为 ( a , b ) (a,b) (a,b)&#xff0c; x 0 ∈ ( a , b ) x_0\in(a,b) x0​∈(a,b)&#xff0c;若 ∃ O ( x 0 , ρ ) ⊂ ( a , b ) \exists O(x_0,\rho)\subset(a,b) ∃…
阅读更多...
web基础-攻防世界

web基础-攻防世界

get-post 一、WP &#xff08;题目本质&#xff1a;get与post传参方法&#xff09; 用 GET 给后端传参的方法是&#xff1a;在?后跟变量名字&#xff0c;不同的变量之间用&隔开。例如&#xff0c;在 url 后添加/&#xff1f;a1 即可发送 get 请求。 利用 hackbar 进行…
阅读更多...
岩石分类检测数据集 4700张 岩石检测 带标注 voc yolo 9类

岩石分类检测数据集 4700张 岩石检测 带标注 voc yolo 9类

岩石分类检测数据集 4700张 岩石检测 带标注 voc yolo 9类 岩石分类检测数据集 (Rock Classification and Detection Dataset) 描述: 本数据集旨在支持对不同类型的岩石进行自动分类和检测&#xff0c;特别适用于地质勘探、矿物识别、环境监测等领域。通过使用该数据集训练的模…
阅读更多...
Python画图|多图共享X轴和Y轴

Python画图|多图共享X轴和Y轴

【1】引言 在python画图的众多场景中&#xff0c;存在多图对应X轴和Y轴可能一致的情形。 为此&#xff0c;尝试找到相关方法&#xff0c;不仅可以将代码写得更简洁&#xff0c;也更节省电脑内存&#xff0c;是提升工作效率的可选之路。 【2】官网教程 点击下方链接&#xf…
阅读更多...
最新文章

Copyright @ 2022~2023