mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 23:13:02 +01:00
Cross origin web worker support is now builtin
This commit is contained in:
parent
23f5ddfe3a
commit
e425abb5f5
6 changed files with 2 additions and 133 deletions
|
|
@ -32,7 +32,6 @@ It is recommended to develop against the `dev` version, and in production to use
|
||||||
|
|
||||||
- Learn how to integrate the editor with these [complete samples](./samples/).
|
- Learn how to integrate the editor with these [complete samples](./samples/).
|
||||||
- [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md).
|
- [Integrate the AMD version](./monaco-editor/docs/integrate-amd.md).
|
||||||
- [Integrate the AMD version cross-domain](./monaco-editor/docs/integrate-amd-cross.md)
|
|
||||||
- [Integrate the ESM version](./monaco-editor/docs/integrate-esm.md)
|
- [Integrate the ESM version](./monaco-editor/docs/integrate-esm.md)
|
||||||
- Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html).
|
- Learn how to use the editor API and try out your own customizations in the [playground](https://microsoft.github.io/monaco-editor/playground.html).
|
||||||
- Explore the [API docs](https://microsoft.github.io/monaco-editor/api/index.html) or read them straight from [`monaco.d.ts`](https://github.com/Microsoft/monaco-editor/blob/gh-pages/playground/monaco.d.ts.txt).
|
- Explore the [API docs](https://microsoft.github.io/monaco-editor/api/index.html) or read them straight from [`monaco.d.ts`](https://github.com/Microsoft/monaco-editor/blob/gh-pages/playground/monaco.d.ts.txt).
|
||||||
|
|
@ -70,7 +69,7 @@ It is an AMD loader that we use in VS Code. Yes.
|
||||||
|
|
||||||
❓ **I see the warning "Could not create web worker". What should I do?**
|
❓ **I see the warning "Could not create web worker". What should I do?**
|
||||||
|
|
||||||
HTML5 does not allow pages loaded on `file://` to create web workers. Please load the editor with a web server on `http://` or `https://` schemes. Please also see the cross-domain case above.
|
HTML5 does not allow pages loaded on `file://` to create web workers. Please load the editor with a web server on `http://` or `https://` schemes.
|
||||||
|
|
||||||
❓ **Is the editor supported in mobile browsers or mobile web app frameworks?**
|
❓ **Is the editor supported in mobile browsers or mobile web app frameworks?**
|
||||||
|
|
||||||
|
|
|
||||||
|
|
@ -1,84 +0,0 @@
|
||||||
## Integrating the AMD version of the Monaco Editor in a cross-domain setup
|
|
||||||
|
|
||||||
Here is the most basic HTML page that embeds the editor, using AMD, in the case that the editor sources are hosted on a different domain (e.g. CDN) than the document origin.
|
|
||||||
|
|
||||||
More self-contained samples are available at [monaco-editor-samples](https://github.com/Microsoft/monaco-editor-samples).
|
|
||||||
|
|
||||||
If you are hosting your `.js` on a different domain (e.g. on a CDN) than the HTML, you should know that the Monaco Editor creates web workers for smart language features. Cross-domain web workers are not allowed, but here is how you can proxy their loading and get them to work:
|
|
||||||
|
|
||||||
Assuming the HTML lives on `www.mydomain.com` and the editor is hosted on `www.mycdn.com`.
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Option 1: Use a data: worker URI
|
|
||||||
|
|
||||||
- `https://www.mydomain.com/index.html`:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script>
|
|
||||||
<script>
|
|
||||||
require.config({
|
|
||||||
paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' }
|
|
||||||
});
|
|
||||||
|
|
||||||
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
|
|
||||||
// the default worker url location (used when creating WebWorkers). The problem here is that
|
|
||||||
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
|
|
||||||
// a web worker through a same-domain script
|
|
||||||
window.MonacoEnvironment = {
|
|
||||||
getWorkerUrl: function (workerId, label) {
|
|
||||||
return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
|
|
||||||
self.MonacoEnvironment = {
|
|
||||||
baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
|
|
||||||
};
|
|
||||||
importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');`)}`;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
require(['vs/editor/editor.main'], function () {
|
|
||||||
// ...
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
# Option 2: Host on your domain a worker proxy
|
|
||||||
|
|
||||||
- `https://www.mydomain.com/index.html`:
|
|
||||||
|
|
||||||
```html
|
|
||||||
<script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script>
|
|
||||||
<script>
|
|
||||||
require.config({
|
|
||||||
paths: { vs: 'http://www.mycdn.com/monaco-editor/min/vs' }
|
|
||||||
});
|
|
||||||
|
|
||||||
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites
|
|
||||||
// the default worker url location (used when creating WebWorkers). The problem here is that
|
|
||||||
// HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
|
|
||||||
// a web worker through a same-domain script
|
|
||||||
window.MonacoEnvironment = {
|
|
||||||
getWorkerUrl: function (workerId, label) {
|
|
||||||
return 'monaco-editor-worker-loader-proxy.js';
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
require(['vs/editor/editor.main'], function () {
|
|
||||||
// ...
|
|
||||||
});
|
|
||||||
</script>
|
|
||||||
```
|
|
||||||
|
|
||||||
- `https://www.mydomain.com/monaco-editor-worker-loader-proxy.js`:
|
|
||||||
|
|
||||||
```js
|
|
||||||
self.MonacoEnvironment = {
|
|
||||||
baseUrl: 'http://www.mycdn.com/monaco-editor/min/'
|
|
||||||
};
|
|
||||||
importScripts('www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');
|
|
||||||
```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
That's it. You're good to go! :)
|
|
||||||
|
|
@ -1,34 +0,0 @@
|
||||||
<!DOCTYPE html>
|
|
||||||
<html>
|
|
||||||
<head>
|
|
||||||
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
|
|
||||||
</head>
|
|
||||||
<body>
|
|
||||||
<h2>Monaco Editor cross origin correct</h2>
|
|
||||||
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
<div
|
|
||||||
id="container"
|
|
||||||
style="float: left; width: 800px; height: 450px; border: 1px solid grey"
|
|
||||||
></div>
|
|
||||||
<div style="clear: both"></div>
|
|
||||||
|
|
||||||
<script src="../../metadata.js"></script>
|
|
||||||
<script src="dev-setup.js"></script>
|
|
||||||
<script>
|
|
||||||
window.MonacoEnvironment = {
|
|
||||||
getWorkerUrl: function () {
|
|
||||||
return 'cross-origin-worker-proxy.js#http://localhost:8088' + RESOLVED_CORE_PATH;
|
|
||||||
}
|
|
||||||
};
|
|
||||||
</script>
|
|
||||||
<script>
|
|
||||||
loadEditor(function () {
|
|
||||||
monaco.editor.create(document.getElementById('container'), {
|
|
||||||
value: document.documentElement.innerHTML,
|
|
||||||
language: 'css'
|
|
||||||
});
|
|
||||||
}, 'http://localhost:8088');
|
|
||||||
</script>
|
|
||||||
</body>
|
|
||||||
</html>
|
|
||||||
|
|
@ -1,10 +0,0 @@
|
||||||
var baseUrl = self.location.hash;
|
|
||||||
baseUrl = baseUrl.replace(/^#/, '');
|
|
||||||
baseUrl = baseUrl.replace(/vs$/, '');
|
|
||||||
|
|
||||||
console.log('WORKER BASE_URL: ' + baseUrl);
|
|
||||||
|
|
||||||
self.MonacoEnvironment = {
|
|
||||||
baseUrl: baseUrl
|
|
||||||
};
|
|
||||||
importScripts(baseUrl + 'vs/base/worker/workerMain.js');
|
|
||||||
|
|
@ -20,9 +20,7 @@
|
||||||
 | 
|
 | 
|
||||||
<a class="loading-opts" href="./colorize.html">[colorize element]</a>
|
<a class="loading-opts" href="./colorize.html">[colorize element]</a>
|
||||||
 | 
|
 | 
|
||||||
<a class="loading-opts" href="./cross-origin-broken.html">[cross origin broken]</a>
|
<a class="loading-opts" href="./cross-origin.html">[cross origin]</a>
|
||||||
 | 
|
|
||||||
<a class="loading-opts" href="./cross-origin-good.html">[cross origin good]</a>
|
|
||||||
 | 
|
 | 
|
||||||
<a class="loading-opts" href="./diff.html">[diff]</a>
|
<a class="loading-opts" href="./diff.html">[diff]</a>
|
||||||
<br /><br />
|
<br /><br />
|
||||||
|
|
|
||||||
Loading…
Add table
Add a link
Reference in a new issue