在Vite5.x中使用monaco-editor

Uncaught (in promise) Error: Unexpected usage
at _EditorSimpleWorker.loadForeignModule

如果你像我这样报错,那一般是getWorker部分出问题了.
在这里插入图片描述

首先推个帖子:

https://github.com/vitejs/vite/discussions/1791

然后是代码

不需要在vite.config.ts中做任何设置,也不用装任何插件.
我使用的是自定义元素(CustomElements),所以和你的写法有些许不同,但终归是能用的.

import "./Monaco.less"//https://github.com/microsoft/monaco-editor/blob/main/docs/integrate-esm.md#using-vite
//https://github.com/vitejs/vite/discussions/1791
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'export class Monaco extends HTMLElement {private editor: monaco.editor.IStandaloneCodeEditorprivate sizeObserver: ResizeObserver = new ResizeObserver(() => { this.editor.layout() })constructor() {super()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()}}this.editor = monaco.editor.create(this, {value: ['function x() {','\tconsole.log("Hello world!");','}'].join('\n'),language: 'typescript'});this.editor.onDidChangeModelContent(() => {if (this.editor) {const value = this.editor.getValue() // 给父组件实时返回最新文本this.emit('change', value)}})monaco.editor.setTheme('vs-dark');//设置深色主题 需要在编辑器创建完毕以后使用//在此类被创建的时候,可能还没有被添加到DOM树中//因此不会存在parentElement,也无法计算实际大小大小//我们需要等到上层代码将此类添加到DOM以后 再处理它们//通常情况下 上层代码在创建完毕以后应立即将他添加到dom中//使用requestAnimationFrame可以有效的解决这个问题requestAnimationFrame(() => {this.editor.layout();if (this.parentElement) this.sizeObserver.observe(this.parentElement)})}emit(en: string, data: string) {this.dispatchEvent(new CustomEvent(en, { detail: data }))}destroy() {this.sizeObserver.disconnect()this.editor.dispose();}
}export default Monaco

使用的是 vite:^5.0.8 monaco-editor:^0.45.0

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

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

相关文章

硬件基础:数字电路概述与基础门电路

什么是数字逻辑电路 数字电路是一种利用离散信号进行信息处理的电子电路系统。 它的核心特点是使用数字信号来执行算术运算和逻辑运算。数字电路的工作信号是离散的,通常只取两个值:高电平和低电平,分别代表数值“1”和“0”。 这种电路的基础…

CSS基本知识总结

目录 一、CSS语法 二、CSS选择器 三、CSS样式表 1.外部样式表 2.内部样式表 3.内联样式 四、CSS背景 1.背景颜色:background-color 2.背景图片:background-image 3.背景大小:background-size 4.背景图片是否重复:backg…

活动回顾丨云原生技术实践营上海站「云原生 AI 大数据」专场(附 PPT)

AI 势不可挡,“智算”赋能未来。2024 年 1 月 5 日,云原生技术实践营「云原生 AI &大数据」专场在上海落幕。活动聚焦容器、可观测、微服务产品技术领域,以云原生 AI 工程化落地为主要方向,希望帮助企业和开发者更快、更高效地…

大数据学习之Flink算子、了解(Transformation)转换算子(基础篇三)

Transformation转换算子(基础篇三) 目录 Transformation转换算子(基础篇三) 三、转换算子(Transformation) 1.基本转换算子 1.1 映射(Map) 1.2 过滤(filter&#xf…

Redis应用(1)缓存(1.2)------Redis三种缓存问题

三者出现的根本原因是:Redis缓存命中率下降,请求直接打到DB上了。 一、 缓存穿透: 1、定义: 缓存穿透是指客户端请求的数据在缓存中和数据库中都不存在,这样缓存永远不会生效,这些请求都会打到数据库。…

C++PythonC# 三语言OpenCV从零开发(4):视频流读取

文章目录 相关链接视频流读取CCSharpPython 总结 相关链接 C&Python&Csharp in OpenCV 专栏 【2022B站最好的OpenCV课程推荐】OpenCV从入门到实战 全套课程(附带课程课件资料课件笔记) OpenCV 教程中文文档|OpenCV中文 OpenCV教程中文文档|W3Csc…

深入理解Linux wall命令:一键向所有用户发送消息(附实例详解和注意事项)

Linux wall命令介绍 wall 是一款命令行工具,主要用于在所有已登录用户的终端上显示消息。你可以直接输入消息或者通过文件传入。 Linux wall命令适用的Linux版本 wall命令在大多数Linux发行版(如Debian、Ubuntu、Alpine、Arch Linux、Kali Linux、Red…

RabbitMQ 入门到精通

RabbitMQ入门到精通 一、了解RabbitMQ1.基础知识2.多种交换机模型详解 二、服务端搭建1.简单搭建2.信息持久化到容器外部 三、消息生产者和消费者1.消息生产者2.消息消费者3.RabbitTemplate 详解4.RabbitListener详解5.其他注解 四、如何保证消息可靠性1.发送方进行消息发送成功…

print会默认调用__str__方法吗

一、现象描述: 打印Mongodb自己生成的id: print(res[_id]) res[_id]输出: 659faa6670433c2c86986861 ObjectId(‘659faa6670433c2c86986861’) 二、为什么会不一样呢 在 MongoDB 中,_id 字段通常是一个 ObjectId 类型的实例。…

物联网中南向协议、北向协议是什么?南向协议、北向协议的区别

南向协议通常是用于管控其他厂商设备的数据接口,即向下对接的数据接口。 通过该协议,实现对底层设备上报信息的集中监控、统计,此外可让控制器利用南向协议的下行通道,对设备实现控制功能。 北向协议是借助控制模块向上层业务应用…

Go 虚拟环境管理工具 gvm 原理介绍与使用指南

本文谈下我对 Go 版本管理的一些想法。让后,我将介绍一个小工具,gvm。这个话题说起来也很简单,但如果想用的爽,还是要稍微梳理下。 背景介绍 Go 的版本管理,并非包的依赖管理,而且关于如何在不同的 Go 版…

探索未来:2024 年 5 大前沿生成式 AI 趋势

探索未来:2024 年 5 大前沿生成式 AI 趋势 1. 多模态 AI 模型的崛起2. 功能强大且强大的小型语言模型3. 自主代理的崛起4. 开源模型将与专有模型匹敌5. 云原生成为本地 GenAI 的关键总结 2023 年标志着技术发展的一个分水岭,生成式 AI 走入了主流。随着 …

牛客:X图形

描述 KiKi学习了循环,BoBo老师给他出了一系列打印图案的练习,该任务是打印用“*”组成的X形图案。 输入描述: 多组输入,一个整数(2~20),表示输出的行数,也表示组成“X”的反斜线和…

浙政钉-H5小程序应用采集开发手册

浙政钉-H5&小程序应用采集开发手册 埋点代码分为:稳定性监控代码(Emas)和流量分析代码(A+)。稳定性监控代码(Emas)只需要在首页加入。流量分析代码(A+)每个页面都需要加入,但是可以写通用js,在其他页面引入。 适用范围 本文档适用于浙政钉业务web(H5)或小程序应…

GPT只是开始,Autonomous Agents即将到来

生成式AI虽然很早便已经引起了广泛关注,但直到ChatGPT的出现,许多公司的领导层才切身感受到了大语言模型(LLM)带来的深远影响。面临这种行业变革,诸多企业正争先恐后地加入到这场潮流中,但生成式AI的进步速…

【力扣 445】两数相加 II C++题解(链表+模拟+数学+头插法)

给你两个 非空 链表来代表两个非负整数。数字最高位位于链表开始位置。它们的每个节点只存储一位数字。将这两数相加会返回一个新的链表。 你可以假设除了数字 0 之外,这两个数字都不会以零开头。 示例1: 输入:l1 [7,2,4,3], l2 [5,6,4]…

indexedDB的基本操作

indexedDB概述 IndexedDB 就是浏览器提供的本地数据库,它可以被网页脚本创建和操作。IndexedDB 允许储存大量数据,提供查找接口,还能建立索引。这些都是 LocalStorage 所不具备的。就数据库类型而言,IndexedDB 不属于关系型数据库…

算法训练营Day55(子序列--编辑距离)

392.判断子序列 392. 判断子序列 - 力扣(LeetCode) 这道题目算是 编辑距离问题 的入门题目(毕竟这里只是涉及到减法),慢慢的,后面就要来解决真正的编辑距离问题了 和最长公共子序列相似 他那道题区别就是e…

期待已久!阿里云容器服务 ACK AI 助手正式上线

作者:行疾 大模型技术的蓬勃发展持续引领 AI 出圈潮流,各行各业都在尝试采用 AI 工具实现智能增效。 2023 年云栖大会上,阿里云容器服务团队正式发布 ACK AI 助手,带来大模型增强智能诊断,帮助企业和开发者降低 K8s …

Spark运行架构以及容错机制

Spark运行架构以及容错机制 1. Spark的角色区分1.1 Driver1.2 Excuter 2. Spark-Cluster模式的任务提交流程2.1 Spark On Yarn的任务提交流程2.1.1 yarn相关概念2.1.2 任务提交流程 2.2 Spark On K8S的任务提交流程2.2.1 k8s相关概念2.2.2 任务提交流程 3. Spark-Cluster模式的…