This commit is contained in:
Alex Dima 2018-04-11 17:34:52 +02:00
Родитель cf3e5fdad4
Коммит b5607fec63
1 изменённых файлов: 50 добавлений и 13 удалений

Просмотреть файл

@ -8,25 +8,60 @@ If you are hosting your `.js` on a different domain (e.g. on a CDN) than the HTM
Assuming the HTML lives on `www.mydomain.com` and the editor is hosted on `www.mycdn.com`. 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`: * `https://www.mydomain.com/index.html`:
```html ```html
<script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script> <script type="text/javascript" src="http://www.mycdn.com/monaco-editor/min/vs/loader.js"></script>
<script> <script>
require.config({ paths: { 'vs': 'http://www.mycdn.com/monaco-editor/min/vs' }}); require.config({ paths: { 'vs': 'http://www.mycdn.com/monaco-editor/min/vs' }});
// Before loading vs/editor/editor.main, define a global MonacoEnvironment that overwrites // 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 // 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 // HTML5 does not allow cross-domain web workers, so we need to proxy the instantiation of
// a web worker through a same-domain script // a web worker through a same-domain script
window.MonacoEnvironment = { window.MonacoEnvironment = {
getWorkerUrl: function(workerId, label) { getWorkerUrl: function(workerId, label) {
return 'monaco-editor-worker-loader-proxy.js'; return `data:text/javascript;charset=utf-8,${encodeURIComponent(`
} self.MonacoEnvironment = {
}; baseUrl: 'http://www.mycdn.com/monaco-editor/min/vs'
};
importScripts('http://www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');`
)}`;
}
};
require(["vs/editor/editor.main"], function () { 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> </script>
``` ```
@ -38,4 +73,6 @@ self.MonacoEnvironment = {
importScripts('www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js'); importScripts('www.mycdn.com/monaco-editor/min/vs/base/worker/workerMain.js');
``` ```
----
That's it. You're good to go! :) That's it. You're good to go! :)