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();