建设部质监局网站,佛山建设网站,东莞网站开发技术公司,汇办公app安卓版本目录
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.搭建一个 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 (Editorwidth600pxheight30vhdefaultLanguagejavascriptdefaultValue// some commentonMount{handleEditorDidMount}/
div classNameactionsdiv classNameactiona target_blank relnoreferrer 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 altlogo classNamelogo src{electronLogo} /Editorwidth600pxheight30vhdefaultLanguagejavascriptdefaultValue// some commentonMount{handleEditorDidMount}/div classNameactionsdiv classNameactiona target_blank relnoreferrer onClick{showValue}Show value/a/divdiv classNameactiona target_blank relnoreferrer onClick{ipcHandle}Send IPC/a/div/divVersions/Versions/)
}export default App6.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
