mirror of
https://github.com/microsoft/monaco-editor.git
synced 2025-12-22 05:50:11 +01:00
Cross origin web worker support is now builtin
This commit is contained in:
Alex Dima
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/).
|
||||
- [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)
|
||||
- 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).
|
||||
|
|
@ -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?**
|
||||
|
||||
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?**
|
||||
|
||||
|
|
|
|||
|
|
@ -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="./cross-origin-broken.html">[cross origin broken]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./cross-origin-good.html">[cross origin good]</a>
|
||||
<a class="loading-opts" href="./cross-origin.html">[cross origin]</a>
|
||||
 | 
|
||||
<a class="loading-opts" href="./diff.html">[diff]</a>
|
||||
<br /><br />
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue