SystemSh0cker/monaco-editor
1
0
Fork 0
mirror of https://github.com/microsoft/monaco-editor.git synced 2025-12-22 18:32:56 +01:00
Code Issues Projects Releases Packages Activity

Update integrate-esm.md

Browse source 
This update fixes the Vite integration note because self.MonacoEnvironment.getWorkerUrl is undefined.
This commit is contained in:
Max 2025-10-08 16:19:31 +02:00 • committed by GitHub
parent 7c2310116c
commit 9e80719ed7
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
1 changed files with 52 additions and 24 deletions
Download patch file Download diff file Expand all files Collapse all files

76
docs/integrate-esm.md
View file

@ -193,32 +193,27 @@ Adding monaco editor to [Vite](https://vitejs.dev/) is simple since it has built
```js ```js
import * as monaco from 'monaco-editor'; import * as monaco from 'monaco-editor';
self.MonacoEnvironment = { import EditorWorker from "monaco-editor/esm/vs/editor/editor.worker?worker";
getWorker: function (workerId, label) { import JsonWorker from "monaco-editor/esm/vs/language/json/json.worker?worker";
const getWorkerModule = (moduleUrl, label) => { import CssWorker from "monaco-editor/esm/vs/language/css/css.worker?worker";
return new Worker(self.MonacoEnvironment.getWorkerUrl(moduleUrl), { import HtmlWorker from "monaco-editor/esm/vs/language/html/html.worker?worker";
name: label, import TsWorker from "monaco-editor/esm/vs/language/typescript/ts.worker?worker";
type: 'module'
});
};
switch (label) { self.MonacoEnvironment = {
case 'json': getWorker(_, label) {
return getWorkerModule('/monaco-editor/esm/vs/language/json/json.worker?worker', label); if (label === "json") {
case 'css': return new JsonWorker();
case 'scss':
case 'less':
return getWorkerModule('/monaco-editor/esm/vs/language/css/css.worker?worker', label);
case 'html':
case 'handlebars':
case 'razor':
return getWorkerModule('/monaco-editor/esm/vs/language/html/html.worker?worker', label);
case 'typescript':
case 'javascript':
return getWorkerModule('/monaco-editor/esm/vs/language/typescript/ts.worker?worker', label);
default:
return getWorkerModule('/monaco-editor/esm/vs/editor/editor.worker?worker', label);
} }
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();
} }
}; };
@ -227,3 +222,36 @@ monaco.editor.create(document.getElementById('container'), {
language: 'javascript' language: 'javascript'
}); });
``` ```
> [!NOTE]
> If you are running your frontend on a port that is different from the origin domain where the workers are evaluated,
> you will encounter cross-origin errors.
>
> In this scenario, you can use a blob like this:
> ```ts
> self.MonacoEnvironment = {
> getWorker(_, label) {
> function createBlobWorker(workerModule: any) {
> const code = workerModule.toString();
> const blob = new Blob([code], { type: 'application/javascript' });
> const blobUrl = URL.createObjectURL(blob);
> return new Worker(blobUrl, { type: 'module' });
> }
>
> if (label === "json") {
> return createBlobWorker(JsonWorker);
> }
> if (label === "css" || label === "scss" || label === "less") {
> return createBlobWorker(CssWorker);
> }
> if (label === "html" || label === "handlebars" || label === "razor") {
> return createBlobWorker(HtmlWorker);
> }
> if (label === "typescript" || label === "javascript") {
> return createBlobWorker(TsWorker);
> }
>
> return createBlobWorker(EditorWorker);
> }
> };
> ```