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

electron react离线使用monaco-editor

目录

1.搭建一个 electron-vite 项目

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

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

4.react中使用

5.完整代码示例

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

7.测试 


1.搭建一个 electron-vite 项目

pnpm create @quick-start/electron

参考链接:

1.Getting Started | electron-vite

2. Electron⚡️Vite | Electron⚡️Vite

然后按照提示操作即可!

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

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

3.引入并做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(/* ... */);

4.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

5.完整代码示例

App.tsx

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

6.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(/* ... */);

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

7.测试 

开发环境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

相关文章:

electron react离线使用monaco-editor

目录 1.搭建一个 electron-vite 项目 2.安装monaco-editor/react和monaco-editor 3.引入并做monaco-editor离线配置 4.react中使用 5.完整代码示例 6.monaco-editor离线配置官方说明 7.测试 1.搭建一个 electron-vite 项目 pnpm create quick-start/electron 参考链接…...

Python 的 WSGI 简单了解

从 flask 的 hello world 说起 直接讨论 WSGI&#xff0c;很多人可能没有概念&#xff0c;我们还是先从一个简单的 hello world 程序开始吧。 from flask import Flaskapp Flask(__name__)app.route("/", methods[GET]) def index():return "Hello world!&q…...

基于stm32使用ucgui+GUIBuilder开发ui实例

1 项目需求 1.1 基于Tft 触摸屏实现一个自锁按键 1.2 按键在按下后背景色需要进行变化&#xff0c;以凸显当前按键状态&#xff08;选中or 未选中&#xff09; 1.3 按键选中时对某一gpio输出低电平&#xff0c;非选中时输出高电平 2 移植 ucgui UCGUI的文件数量很大&#x…...

Spring扩展点系列-ApplicationContextAwareProcessor

文章目录 简介源码分析示例代码示例一&#xff1a;扩展点的执行顺序运行示例一 示例二&#xff1a;获取配置文件值配置文件application.properties内容定义工具类ConfigUtilcontroller测试调用运行示例二 示例三&#xff1a;实现ResourceLoaderAware读取文件ExtendResourceLoad…...

基于Keil软件实现实时时钟(江协科技HAL库)

实时时钟实验是基于江协科技STM32的HAL库工程模板创建的(可以在作品“基于江科大STM32创建的HAL库工程模板”中的结尾处获取工程模板的百度网盘链接) 复制“OLED显示”的工程文件——“4-1 OLED显示屏”,并命名为“12-2 实时时钟 ”。打开工程,把下面的程序复制到相应的文…...

dedecms靶场(四种webshell姿势)

进入靶场 姿势一&#xff1a;过文件管理器上传WebShell 步骤一&#xff1a;登录后台 /dede 步骤二&#xff1a;核心-》文件式管理-》文件上传-》上传一句话木马 点击 步骤三&#xff1a;进行蚁剑连接 姿势二&#xff1a;修改模板文件拿WebShell 步骤一&#xff1a;模板-》默认…...

PHP:强大的Web开发语言

PHP&#xff1a;强大的Web开发语言 一、PHP 简介及优势 PHP 的基本概念 PHP&#xff08;PHP: Hypertext Preprocessor&#xff09;即 “超文本预处理器”&#xff0c;是一种通用开源脚本语言&#xff0c;最初由 Rasmus Lerdorf 于 1994 年创建。它可以在服务器上执行&#xf…...

06_Python数据类型_元组

Python的基础数据类型 数值类型&#xff1a;整数、浮点数、复数、布尔字符串容器类型&#xff1a;列表、元祖、字典、集合 元组 元组&#xff08;Tuple&#xff09;是一种不可变的序列类型&#xff0c;与列表类似&#xff0c;但有一些关键的区别。本质&#xff1a;只读的列表…...

【Vue】- ref获取DOM元素和购物车案例分析

文章目录 知识回顾前言源码分析1. ref2. 购物车案例分析3. 购物车计算、全选 拓展知识数据持久化localStorage 总结 知识回顾 前言 元素上使用 ref属性关联响应式数据&#xff0c;获取DOM元素 步骤 ● 创建 ref > const hRef ref(null) ● 模板中建立关联 > <h1 re…...

【AI大模型】ChatGPT模型原理介绍(下)

目录 &#x1f354; GPT-3介绍 1.1 GPT-3模型架构 1.2 GPT-3训练核心思想 1.3 GPT-3数据集 1.4 GPT-3模型的特点 1.5 GPT-3模型总结 &#x1f354; ChatGPT介绍 2.1 ChatGPT原理 2.2 什么是强化学习 2.3 ChatGPT强化学习步骤 2.4 监督调优模型 2.5 训练奖励模型 2.…...

Python数据分析与可视化实战指南

在数据驱动的时代&#xff0c;Python因其简洁的语法、强大的库生态系统以及活跃的社区&#xff0c;成为了数据分析与可视化的首选语言。本文将通过一个详细的案例&#xff0c;带领大家学习如何使用Python进行数据分析&#xff0c;并通过可视化来直观呈现分析结果。 一、环境准…...

react18基础教程系列-- 框架基础理论知识mvc/jsx/createRoot

react的设计模式 React 是 mvc 体系&#xff0c;vue 是 mvvm 体系 mvc: model(数据)-view(视图)-controller(控制器) 我们需要按照专业的语法去构建 app 页面&#xff0c;react 使用的是 jsx 语法构建数据层&#xff0c;需要动态处理的的数据都要数据层支持控制层: 当我们需要…...

牛客周赛 Round 60 折返跑(组合数学)

题目链接&#xff1a;题目 大意&#xff1a; 在 1 1 1到 n n n之间往返跑m趟&#xff0c;推 m − 1 m-1 m−1次杆子&#xff0c;每次都向中间推&#xff0c;不能推零次&#xff0c;问有多少种推法&#xff08;mod 1e97&#xff09;。 思路&#xff1a; 一个高中学过的组合数…...

深入浅出Java匿名内部类:用法详解与实例演示

匿名内部类&#xff08;Anonymous Inner Class&#xff09;在Java中是一种非常有用的特性&#xff0c;它允许你在一个类的定义中直接创建并实例化一个内部类&#xff0c;而不需要为这个内部类指定一个名字。匿名内部类通常用于以下几种情况&#xff1a; 实现接口&#xff1a;当…...

数据库MySQL、Mariadb、PostgreSQL、MangoDB、Memcached和Redis详细介绍

以下是一些常见的后端开发数据库选型&#xff1a; 关系型数据库&#xff08;RDBMS&#xff09;&#xff1a;关系型数据库是最常见的数据库类型&#xff0c;使用表格和关系模型来存储和管理数据。常见的关系型数据库包括MySQL、PostgreSQL和Oracle等。这些数据库适合处理结构化数…...

【ArcGIS Pro实操第七期】栅格数据合并、裁剪及统计:以全球不透水面积为例

【ArcGIS Pro实操第七期】批量裁剪&#xff1a;以全球不透水面积为例 准备&#xff1a;数据下载ArcGIS Pro批量裁剪数据集1 数据拼接2 数据裁剪3 数据统计&#xff1a;各栅格取值3.1 栅格计算器-精确提取-栅格数据特定值3.2 数据统计 4 不透水面积变化分析 参考 准备&#xff1…...

【Linux】Image、zImage与uImage的区别

1、Image 1.1 什么是 Image Image 是一种未压缩的 Linux 内核镜像文件&#xff0c;包含了内核的所有代码、数据和必要的元信息。它是 Linux 内核在编译过程中生成的一个原始的二进制文件&#xff0c;未经过任何压缩或额外的封装处理。由于未压缩&#xff0c;Image 文件相对较…...

算子加速(3):自定义cuda扩展

需要自定义某个层,或有时候用c++实现你的操作(c++扩展)可能会更好: 例如:需要实现一个新型的激活函数例如: bevfusion用cuda实现bevpool加速自定义扩展的步骤 (1) 首先用纯pytorch和python 实现我们所需的功能,看看效果再决定要不要进一步优化(2) 明确优化方向,用C++ (或CU…...

信息安全数学基础(14)欧拉函数

前言 在信息安全数学基础中&#xff0c;欧拉函数&#xff08;Eulers Totient Function&#xff09;是一个非常重要的概念&#xff0c;它与模运算、剩余类、简化剩余系以及密码学中的许多应用紧密相关。欧拉函数用符号 φ(n) 表示&#xff0c;其中 n 是一个正整数。 一、定义 欧…...

7-17 汉诺塔的非递归实现

输入样例: 3输出样例: a -> c a -> b c -> b a -> c b -> a b -> c a -> c 分析&#xff1a; 不会汉罗塔的uu们&#xff0c;先看看图解&#xff1a; 非递归代码&#xff1a; #include<iostream> #include<stack> using namespace std; s…...

【SpringBoot】100、SpringBoot中使用自定义注解+AOP实现参数自动解密

在实际项目中,用户注册、登录、修改密码等操作,都涉及到参数传输安全问题。所以我们需要在前端对账户、密码等敏感信息加密传输,在后端接收到数据后能自动解密。 1、引入依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId...

苍穹外卖--缓存菜品

1.问题说明 用户端小程序展示的菜品数据都是通过查询数据库获得&#xff0c;如果用户端访问量比较大&#xff0c;数据库访问压力随之增大 2.实现思路 通过Redis来缓存菜品数据&#xff0c;减少数据库查询操作。 缓存逻辑分析&#xff1a; ①每个分类下的菜品保持一份缓存数据…...

Python基于历史模拟方法实现投资组合风险管理的VaR与ES模型项目实战

说明&#xff1a;这是一个机器学习实战项目&#xff08;附带数据代码文档&#xff09;&#xff0c;如需数据代码文档可以直接到文章最后关注获取。 1.项目背景 在金融市场日益复杂和波动加剧的背景下&#xff0c;风险管理成为金融机构和个人投资者关注的核心议题之一。VaR&…...

【笔记】WSL 中 Rust 安装与测试完整记录

#工作记录 WSL 中 Rust 安装与测试完整记录 1. 运行环境 系统&#xff1a;Ubuntu 24.04 LTS (WSL2)架构&#xff1a;x86_64 (GNU/Linux)Rust 版本&#xff1a;rustc 1.87.0 (2025-05-09)Cargo 版本&#xff1a;cargo 1.87.0 (2025-05-06) 2. 安装 Rust 2.1 使用 Rust 官方安…...

【 java 虚拟机知识 第一篇 】

目录 1.内存模型 1.1.JVM内存模型的介绍 1.2.堆和栈的区别 1.3.栈的存储细节 1.4.堆的部分 1.5.程序计数器的作用 1.6.方法区的内容 1.7.字符串池 1.8.引用类型 1.9.内存泄漏与内存溢出 1.10.会出现内存溢出的结构 1.内存模型 1.1.JVM内存模型的介绍 内存模型主要分…...

为什么要创建 Vue 实例

核心原因:Vue 需要一个「控制中心」来驱动整个应用 你可以把 Vue 实例想象成你应用的**「大脑」或「引擎」。它负责协调模板、数据、逻辑和行为,将它们变成一个活的、可交互的应用**。没有这个实例,你的代码只是一堆静态的 HTML、JavaScript 变量和函数,无法「活」起来。 …...

Kubernetes 网络模型深度解析:Pod IP 与 Service 的负载均衡机制,Service到底是什么?

Pod IP 的本质与特性 Pod IP 的定位 纯端点地址&#xff1a;Pod IP 是分配给 Pod 网络命名空间的真实 IP 地址&#xff08;如 10.244.1.2&#xff09;无特殊名称&#xff1a;在 Kubernetes 中&#xff0c;它通常被称为 “Pod IP” 或 “容器 IP”生命周期&#xff1a;与 Pod …...

零知开源——STM32F103RBT6驱动 ICM20948 九轴传感器及 vofa + 上位机可视化教程

STM32F1 本教程使用零知标准板&#xff08;STM32F103RBT6&#xff09;通过I2C驱动ICM20948九轴传感器&#xff0c;实现姿态解算&#xff0c;并通过串口将数据实时发送至VOFA上位机进行3D可视化。代码基于开源库修改优化&#xff0c;适合嵌入式及物联网开发者。在基础驱动上新增…...

go 里面的指针

指针 在 Go 中&#xff0c;指针&#xff08;pointer&#xff09;是一个变量的内存地址&#xff0c;就像 C 语言那样&#xff1a; a : 10 p : &a // p 是一个指向 a 的指针 fmt.Println(*p) // 输出 10&#xff0c;通过指针解引用• &a 表示获取变量 a 的地址 p 表示…...

spring Security对RBAC及其ABAC的支持使用

RBAC (基于角色的访问控制) RBAC (Role-Based Access Control) 是 Spring Security 中最常用的权限模型&#xff0c;它将权限分配给角色&#xff0c;再将角色分配给用户。 RBAC 核心实现 1. 数据库设计 users roles permissions ------- ------…...