electron react离线使用monaco-editor

1.安装@monaco-editor/react和monaco-editor

pnpm i @monaco-editor/react
pnpm i monaco-editor

2.引入并做monaco-editor离线配置

import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'
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';
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();},
};
loader.config({ monaco })
loader.init().then(/* ... */);

3.react中使用

function App(): JSX.Element {const editorRef = useRef(null)function handleEditorDidMount(editor, monaco) {editorRef.current = editor}function showValue() {alert(editorRef.current.getValue())}return (<><Editorwidth="600px"height="30vh"defaultLanguage="javascript"defaultValue="// some comment"onMount={handleEditorDidMount}/>
​<div className="actions"><div className="action"><a target="_blank" rel="noreferrer" onClick={showValue}>Show value</a></div></div></>)
}
​
export default App

4.完整代码示例

import Versions from './components/Versions'
import electronLogo from './assets/electron.svg'
import { useRef } from 'react'
import Editor, { DiffEditor, useMonaco, loader } from '@monaco-editor/react'
import * as monaco from 'monaco-editor'
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';
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();},
};
loader.config({ monaco })
loader.init().then(/* ... */);function App(): JSX.Element {const ipcHandle = (): void => window.electron.ipcRenderer.send('ping')const editorRef = useRef(null)function handleEditorDidMount(editor, monaco) {editorRef.current = editor}function showValue() {alert(editorRef.current.getValue())}return (<><img alt="logo" className="logo" src={electronLogo} /><Editorwidth="600px"height="30vh"defaultLanguage="javascript"defaultValue="// some comment"onMount={handleEditorDidMount}/><div className="actions"><div className="action"><a target="_blank" rel="noreferrer" onClick={showValue}>Show value</a></div><div className="action"><a target="_blank" rel="noreferrer" onClick={ipcHandle}>Send IPC</a></div></div><Versions></Versions></>)
}export default App

5.monaco-editor离线配置官方说明

loader-config

该库导出(命名)名为loader实用程序。基本上,它是@monaco-editor/loader的引用。默认情况下, monaco文件是从CDN下载的。有能力改变这种行为,以及有关monaco AMD加载程序的其他事情。我们有一个默认的配置文件,您可以通过以下方式修改:

import { loader } from '@monaco-editor/react';// you can change the source of the monaco files
loader.config({ paths: { vs: '...' } });// you can configure the locales
loader.config({ 'vs/nls': { availableLanguages: { '*': 'de' } } });

// or

loader.config({paths: {vs: '...',},'vs/nls': {availableLanguages: {'*': 'de',},},
});

使用monaco-editor作为 npm 包

从v4.4.0版本开始,可以将monaco-editor作为npm包使用;从node_modules导入它并将monaco源包含到您的包中(而不是使用 CDN)。要使其正常工作,您可以执行以下操作:

import * as monaco from 'monaco-editor';
import { loader } from '@monaco-editor/react';loader.config({ monaco });// ...

注意:您应该意识到,这可能需要额外的webpack插件,例如monaco-editor-webpack-plugin ,否则可能无法在CRA生成的应用程序中使用而不弹出它们。

如果你使用Vite ,你需要这样做:

import { loader } from '@monaco-editor/react';import * as monaco from 'monaco-editor';
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';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();},
};loader.config({ monaco });loader.init().then(/* ... */);

注意:您传递的对象将与默认对象深度合并

开发环境pnpm dev启动测试

 打包免安装版启动测试

打包安装版测试

项目Github地址

参考链接:

1.https://www.npmjs.com/package/@monaco-editor/react#use-monaco-editor-as-an-npm-package

2.https://www.npmjs.com/package/monaco-editor

3.Monaco Editor

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

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

相关文章

软考 -- 软件设计师 -- 二轮复习(3) -- 数据结构(持续更新)

软考 – 软件设计师 – 二轮复习(3) – 数据结构(持续更新) 文章目录 软考 -- 软件设计师 -- 二轮复习(3) -- 数据结构(持续更新)前言一、时间、空间复杂度二、递归式时间复杂度三、线性表四、栈五、栈和队列六、串七、朴素模式匹配八、KMP模式匹配九、数组十、矩阵十一、树、二…

HarmonyOS开发实战( Beta5.0)自定义装饰器实践规范

介绍 本示例介绍通过自定义装饰器在自定义组件中自动添加inspector (布局回调)方法并进行调用。 效果图预览 不涉及 使用说明 在自定义组件上添加自定义装饰器CallbackObserver&#xff0c;并根据参数设置对应的方法名和需要绑定的组件的ID。编译工程&#xff0c;可以根据…

四款音频剪辑软件免费使用,你更pick哪一个?

视频剪辑知随着软件的不断更新&#xff0c;入门门槛和操作难度也随之变得越来越低&#xff0c;但是依然有不少人不知道剪辑视频要用什么工具&#xff0c;作为一个视频剪辑爱好者&#xff0c;我尝试过不少编辑软件&#xff0c;今天就来跟大家分享一下四款视频剪辑软件在实际使用…

通用四期ARM架构银河麒麟桌面操作系统V10【安装、配置FTP客户端】

一、操作环境 服务端&#xff1a;银河麒麟桌面操作系统V10SP1 客户端&#xff1a;银河麒麟桌面操作系统V10SP1 二、服务端配置 注&#xff1a;以下命令均在终端执行 鼠标点击桌面右键&#xff0c;选择打开终端 操作步骤&#xff1a; 1、安装vsftpd软件&#xff1a;如果提…

深入理解TCP三次握手

在网络通信中&#xff0c;TCP&#xff08;Transmission Control Protocol&#xff0c;传输控制协议&#xff09;是一个可靠的、面向连接的协议&#xff0c;它保证了数据包的顺序和完整性。为了建立一个稳定的连接&#xff0c;TCP 使用了一个被称为 三次握手&#xff08;Three-W…

滑动窗口(1)_长度最小的子数组

个人主页&#xff1a;C忠实粉丝 欢迎 点赞&#x1f44d; 收藏✨ 留言✉ 加关注&#x1f493;本文由 C忠实粉丝 原创 滑动窗口(1)_长度最小的子数组 收录于专栏【经典算法练习】 本专栏旨在分享学习C的一点学习笔记&#xff0c;欢迎大家在评论区交流讨论&#x1f48c; 目录 1. …

一款高效、简洁的帧动画生成工具

在现代网页设计和移动应用开发中&#xff0c;帧动画是一种常见的动画实现方式&#xff0c;它通过连续显示一系列静态图片来模拟动画效果。然而&#xff0c;手动创建和管理这些帧动画图片不仅耗时费力&#xff0c;而且效率低下。为此&#xff0c;gka 应运而生&#xff0c;它是一…

Java学习Day41:骑龙救!(springMVC)

springMVC与sevlet都是对应表现层web的&#xff0c;但是越复杂的项目使用SpringMVC越方便 基于Java实现MVC模型的轻量级web框架 目标&#xff1a; 小案例&#xff1a; 1.导入依赖 spring-context: 提供 Spring 框架的核心功能&#xff0c;如依赖注入、事件发布和其他应用上…

无人机之伯努利定律

无人机的伯努利定律是解释无人机飞行原理的关键理论之一&#xff0c;它主要阐述了流体&#xff08;如空气&#xff09;在流动过程中速度与压力之间的关系。以下是对无人机伯努利定律的详细解释&#xff1a; 一、伯努利定律的基本原理 伯努利定律是流体力学中的一个基本原理&am…

【python】—— Python爬虫实战:爬取珠海市2011-2023年天气数据并保存为CSV文件

目录 目标 准备工作 爬取数据的开始时间和结束时间 爬取数据并解析 将数据转换为DataFrame并保存为CSV文件 本文将介绍如何使用Python编写一个简单的爬虫程序,以爬取珠海市2011年至2023年的天气数据,并将这些数据保存为CSV文件。我们将涉及到以下知识点: 使用r…

Word 脚注与正文之间的空行怎么删除啊?

全网都搜索不到解决方案&#xff0c;难道只有我一个人遇到这个问题了吗&#xff1f; 无语&#xff0c;。、;

Java导入、导出excel保姆级教程(附封装好的工具类)

前言 我们在日常开发中&#xff0c;一定遇到过要将数据导出为Excel的需求&#xff0c;那么怎么做呢&#xff1f;在做之前&#xff0c;我们需要思考下Excel的组成。Excel是由四个元素组成的分别是&#xff1a;WorkBook(工作簿)、Sheet(工作表)、Row(行)、Cell(单元格)&#xff…

linux入门到实操-1 Linux概述、诞生过程、发行版本,如何安装?

教程来源&#xff1a;B站视频BV1WY4y1H7d3 3天搞定Linux&#xff0c;1天搞定Shell&#xff0c;清华学神带你通关_哔哩哔哩_bilibili 整理汇总的课程内容笔记和课程资料&#xff0c;供大家学习交流下载&#xff1a;夸克网盘分享 本文内容为完整笔记的入门篇 概述部分历史内容…

使用LSTM(长短期记忆网络)模型预测股票价格的实例分析

一&#xff1a;LSTM与RNN的区别 LSTM&#xff08;Long Short-Term Memory&#xff09;是一种特殊的循环神经网络&#xff08;RNN&#xff09;架构。LSTM是为了解决传统RNN在处理长序列数据时遇到的梯度消失或梯度爆炸问题而设计的。 在传统的RNN中&#xff0c;信息通过隐藏状…

使用虚拟信用卡WildCard轻松订阅POE:全面解析平台功能与订阅方式

POE&#xff08;Platform of Engagement&#xff09;是一个由Quora推出的人工智能聊天平台&#xff0c;汇集了多个强大的AI聊天机器人&#xff0c;如GPT-4、Claude、Sage等。POE提供了一个简洁、统一的界面&#xff0c;让用户能够便捷地与不同的AI聊天模型进行互动。这种平台的…

基于SpringBoot的社团管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 基于JavaSpringBootVueMySQL的社团管理系统【附源码文档】、…

HashTable哈希表

概念 散列表(Hash Table)&#xff0c;又称哈希表。是一种数据结构&#xff0c;特点是:数据元素的关键字与其存储地址直接相关 在顺序结构以及树型结构中&#xff0c;数据元素的关键字与其存储位置没有对应的关系&#xff0c;因此在查找一个元素时&#xff0c;必须要经过关键码…

Windows 平台安装 Nacos 2.x

环境准备 64 位操作系统&#xff0c;Windows 10 / Linux Centos 7JDK 1.8 安装包下载 安装包下载官方地址&#xff1a;https://github.com/alibaba/nacos/releases 启动 将安装包解压到安装的目录下&#xff0c;改名为 nacos-2.0.4。然后进行到 bin 目录下&#xff0c;打开…

软件测试服务公司出具第三方软件测试报告流程和周期简析

随着信息技术的飞速发展&#xff0c;软件已成为各行各业不可或缺的重要工具。然而&#xff0c;软件的质量直接影响到企业的效率和用户体验&#xff0c;因此&#xff0c;软件测试服务的重要性日益凸显。软件测试服务公司&#xff0c;顾名思义&#xff0c;就是专门提供专业的软件…

工业机器人9公里远距离图传模块,无人机低延迟高清视界,跨过距离限制

在科技日新月异的今天&#xff0c;无线通信技术正以未有的速度发展&#xff0c;其中&#xff0c;图传模块作为连接现实与数字世界的桥梁&#xff0c;正逐步展现出其巨大的潜力和应用价值。今天&#xff0c;我们将聚焦一款引人注目的产品——飞睿智能9公里远距离图传模块&#x…