How to run the Monaco editor from a CDN like cdnjs?

问题

I am struggling a bit to find a minimal runnable example that just runs from the CDN, as opposed to the existing in-tree examples which mostly use local servers.

回答1:

After Googling a bit I found https://jsfiddle.net/developit/bwgkr6uq/ which just works with unpkg.com, and so I mostly just adapted it to cdnjs, here is a single working HTML file:

<!doctype html>
<html lang="en">
<head>
    <meta charset="utf-8">
    <title>monaco editor</title>
    <link rel="stylesheet" data-name="vs/editor/editor.main" href="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/editor/editor.main.min.css">
</head>
<body>
<div id="container" style="height:400px;border:1px solid black;"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/loader.min.js"></script>
<script>
// Based on https://jsfiddle.net/developit/bwgkr6uq/ which just works but is based on unpkg.com.
// Provided by loader.min.js.
require.config({ paths: { 'vs': 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };
let proxy = URL.createObjectURL(new Blob([`
    self.MonacoEnvironment = {
        baseUrl: 'https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min'
    };
    importScripts('https://cdnjs.cloudflare.com/ajax/libs/monaco-editor/0.20.0/min/vs/base/worker/workerMain.min.js');
`], { type: 'text/javascript' }));
require(["vs/editor/editor.main"], function () {
    let editor = monaco.editor.create(document.getElementById('container'), {
        value: `function x() {
  console.log("Hello world!");
}`,
        language: 'javascript',
        theme: 'vs-dark'
    });
});
</script>
</body>
</html>

来源：https://stackoverflow.com/questions/63179813/how-to-run-the-monaco-editor-from-a-cdn-like-cdnjs

标签

monaco-editor