vue3 vite使用 monaco-editor 报错

报错:Unexpected usage at EditorSimpleWorker.loadForeignModule

修改配置:

 "monaco-editor-webpack-plugin": "^4.2.0",删除不用

版本:

 "monaco-editor": "^0.28.1",

 修改如下:

 optimizeDeps: {include: [`monaco-editor/esm/vs/language/json/json.worker`,`monaco-editor/esm/vs/language/css/css.worker`,`monaco-editor/esm/vs/language/html/html.worker`,`monaco-editor/esm/vs/language/typescript/ts.worker`,`monaco-editor/esm/vs/editor/editor.worker`,],},transpileDependencies: true,configureWebpack: {plugins: [],},

 文件中的代码

<template><divref="editorContainer"class="editor-container":class="{ 'no-suggestion': !props.suggestion }":style="{ height: `${props.myHeight ? props.myHeight : height + 'px'}` }"></div>
</template><script  setup lang="ts">
import { ref, watch, onMounted, onUnmounted, toRaw } from "vue";
//引入monaco-editor
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";const props = defineProps(["value","myHeight","suggestion","lineNumbers","fontSize","background",
]);
const emit = defineEmits(["change"]);const height = ref<any>(0);
const editor = ref<any>(null);
const editorContainer = ref<any>(null);monaco.editor.defineTheme("define-vs-dark", {base: "vs-dark",inherit: true,rules: [{foreground: props.background ? props.background : "#2f3031",token: "markdown.header",fontStyle: "bold",},],colors: {"editor.background": props.background ? props.background : "#2f3031","editorGutter.background": props.background ? props.background : "#2f3031",},
});const cssArr = ["css", "scss", "less"];
const jsonArr = ["json"];
const htmlArr = ["html", "handlebars", "razor"];
const tsArr = ["typescript", "javascript"];
const se: any = self;onMounted(() => {
//高亮及提示se.MonacoEnvironment = {getWorker(_: any, label: any) {if (jsonArr.includes(label)) {return new jsonWorker();}if (cssArr.includes(label)) {return new cssWorker();}if (htmlArr.includes(label)) {return new htmlWorker();}if (tsArr.includes(label)) {return new tsWorker();}return new editorWorker();},};//创建editor.value = monaco.editor.create(editorContainer.value, {value: props.value,theme: "define-vs-dark",folding: false,// cursorStyle: "line", //光标样式language: "typescript",selectOnLineNumbers: true, //显示行号roundedSelection: false,readOnly: false, // 只读automaticLayout: false, //自动布局glyphMargin: true, //字形边缘useTabStops: false,fontSize: props.fontSize ? props.fontSize : 14, //字体大小quickSuggestionsDelay: 100, //代码提示延时contextmenu: true,scrollBeyondLastLine: false,acceptSuggestionOnEnter: props.suggestion ? "on" : "off", // 接受输入建议 "on" | "off" | "smart"acceptSuggestionOnCommitCharacter: props.suggestion, // 接受关于提交字符的建议lineNumbers: props.lineNumbers ? "on" : "off",minimap: {enabled: false, // 关闭代码缩略图},});// 监听内容变化toRaw(editor.value).onDidChangeModelContent((e: any) => {sendValue();setContainerHeight();});setContainerHeight();// 监听失去焦点事件toRaw(editor.value).onDidBlurEditorText(() => {});
});
const reciveValue = () => {if (!editor.value) return;const currentValue = toRaw(editor.value).getValue();if (currentValue === props.value) return;toRaw(editor.value).setValue(props.value);
};
const sendValue = () => {if (!editor.value) return;const content = toRaw(editor.value).getValue()? toRaw(editor.value).getValue(): props.value;emit("change", content);
};const setContainerHeight = () => {const lineCount = toRaw(editor.value).getModel().getLineCount();const lineHeight = toRaw(editor.value).getOption(monaco.editor.EditorOption.lineHeight);height.value = lineCount * lineHeight + monaco.editor.EditorOption.lineHeight;
};
const watchValue = watch(() => props.value,() => {reciveValue();}
);
onMounted(() => {sendValue();
});
onUnmounted(() => {editor.value?.dispose();watchValue();
});
</script><style scoped lang="less">
.editor-container {width: 100%;
}
.no-suggestion {.suggest-widget {display: none !important;}
}
.editor-scrollable .lines-content {width: 100% !important;height: 100% !important;
}
</style>

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

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

相关文章

vue3学习源码笔记(小白入门系列)------ 组件是如何渲染成dom挂载到指定位置的?

文章目录 os准备组件如何被挂载到页面上第一步 createApp 做了哪些工作&#xff1f;ensureRendererbaseCreateRenderercreateAppAPImountrenderpatchprocessComponentprocessElement 总结 os 学习一下vue3 源码&#xff0c;顺便记录分享下 使用vitest 插件调试源码 辅助阅读 …

matlab使用教程(25)—常微分方程(ODE)选项

1.ODE 选项摘要 解算 ODE 经常要求微调参数、调整误差容限或向求解器传递附加信息。本主题说明如何指定选项以及每个选项与哪些微分方程求解器兼容。 1.1 选项语法 使用 odeset 函数创建 options 结构体&#xff0c;然后将其作为第四个输入参数传递给求解器。例如&#xff0…

【算法专题突破】双指针 - 复写零(2)

目录 1. 题目解析 2. 算法原理 3. 代码编写 写在最后&#xff1a; 1. 题目解析 题目链接&#xff1a;1089. 复写零 - 力扣&#xff08;Leetcode&#xff09; 我先来读题&#xff0c; 题目的意思非常的简单&#xff0c;其实就是&#xff0c; 遇到 0 就复制一个写进数组&a…

UE4/5的Custom节点:在VScode使用HLSL(新手入门用)

目录 custom节点 VSCode环境安装 将VSCode里面的代码放入Custom中 custom节点 可以看到这是一个简单的Custom节点&#xff1a; 而里面是可以填写代码的&#xff1a; 但是在这里面去写代码会发现十分的繁琐【按下enter后&#xff0c;不会换行&#xff0c;也不会自动缩进】 …

【C语言】喝汽水问题

大家好&#xff01;今天我们来学习C语言中的喝汽水问题&#xff01; 目录 1. 题目内容&#xff1a; 2. 思路分析 2.1 方法一 2.2 方法二 2.3 方法三 3. 代码实现 3.1 方法一 3.2 方法二 3.3 方法三 1. 题目内容 喝汽水&#xff0c;1瓶汽水1元&#xff0c;2个空瓶可以…

python+TensorFlow实现人脸识别智能小程序的项目(包含TensorFlow版本与Pytorch版本)

pythonTensorFlow实现人脸识别智能小程序的项目&#xff08;包含TensorFlow版本与Pytorch版本&#xff09; 一&#xff1a;TensorFlow基础知识内容部分&#xff08;简明扼要&#xff0c;快速适应&#xff09;1、下载Cifar10数据集&#xff0c;并进行解压缩处理2、将Cifar10数据…

开源ChatGPT系统源码 采用NUXT3+Laravel9后端开发 前后端分离版本

开源ChatGPT系统源码 采用NUXT3Laravel9后端开发 前后端分离版本 ChatGPT是一种基于AI的聊天机器人技术&#xff0c;它可以帮助用户与聊天机器人进行自然语言交流&#xff0c;以解决用户的问题或满足用户的需求。ChatGPT的核心技术是使用自然语言处理&#xff08;NLP&#xff…

【LeetCode】1448.统计二叉树中好节点的数目

题目 给你一棵根为 root 的二叉树&#xff0c;请你返回二叉树中好节点的数目。 「好节点」X 定义为&#xff1a;从根到该节点 X 所经过的节点中&#xff0c;没有任何节点的值大于 X 的值。 示例 1&#xff1a; 输入&#xff1a;root [3,1,4,3,null,1,5] 输出&#xff1a;4 …

Vue实现Excel表格中按钮增加小数位数,减少小数位数功能,多用于处理金融数据

效果图 <template><div><el-button click"increaseDecimals">A按钮</el-button><el-button click"roundNumber">B按钮</el-button><el-table :data"tableData" border><el-table-column v-for&q…

新版Jadx 加载dex报错 jadx.plugins.input.dex.DexException:Bad checksum 解决方法

本文所有教程及源码、软件仅为技术研究。不涉及计算机信息系统功能的删除、修改、增加、干扰,更不会影响计算机信息系统的正常运行。不得将代码用于非法用途,如侵立删!新版Jadx(1.6+) 加载dex报错 jadx.plugins.input.dex.DexException:Bad checksum 解决方法 环境 win10J…

Android 之 WindowManager (窗口管理服务)

本节引言&#xff1a; 本节给大家带来的Android给我们提供的系统服务中的——WindowManager(窗口管理服务)&#xff0c; 它是显示View的最底层&#xff0c;Toast&#xff0c;Activity&#xff0c;Dialog的底层都用到了这个WindowManager&#xff0c; 他是全局的&#xff01;该类…

C#-集合小例子

目录 背景&#xff1a; 过程: 1.添加1-100数: 2.求和: 3.平均值: 4.代码:​ 总结: 背景&#xff1a; 往集合里面添加100个数&#xff0c;首先得有ArrayList导入命名空间&#xff0c;这个例子分为3步&#xff0c;1.添加1-100个数2.进行1-100之间的总和3.求总和的平均值&…