如何在没有 node.js 的情况下使用 monaco 编辑器答案

【问题标题】：how to use monaco editor without node.js如何在没有 node.js 的情况下使用 monaco 编辑器
【发布时间】：2021-03-24 17:51:18
【问题描述】：

我需要将 monaco-editor 与纯客户端解决方案集成在网页上，并且不使用 node.js。

@SimperT How to implement monaco-editor on a webpage without nodejs and electron 我找到了一个很好的答案，但是他的存储库已经过时（js 是一个狂野的世界），而且我有一个额外的限制，即文件只能在本地提供（没有 cdn，它用于 Intranet，没有外部访问）。

所以，这有点像瓶子里的消息，但如果有人有关于如何做的线索或指示，我会全力以赴......（如果我想出一个解决方案，我会发布它在这里）

【问题讨论】：

摩纳哥是纯粹的客户端。 “没有 Node.js”是什么意思？你的意思是没有 npm？
@GuyIncognito 好吧...显然我在这里错过了一些东西...我可以使用 npm 来检索所有内容并将其与其他内容一起提供吗？ github.com/microsoft/monaco-editor-samples/tree/master/… 确实给了我新的方式来理解我在做什么......

标签： monaco-editor

【解决方案1】：

这个问题有点笨拙。尽管如此，我的错误可能对其他人有益：问题出在未正确设置的 require 变量中。

在这里找到的包：https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.23.0.tgz

解压缩并正确提供静态服务。路径是monaco-editor-x.xx.x/package/min/vs/[editor/]。

这是提供的 html 页面（使用cherrypy）：

<!doctype html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>monaco editor</title>

        <!-- MONACO CSS -->
        <link rel="stylesheet" data-name="vs/editor/editor.main" href="_static/js/ext/monaco-editor/min/vs/editor/editor.main.css">
    </head>

    <body style="background-color: rgb(140, 190, 190);">
        <h1>monaco editor</h1>
        <div id="monaco_editor" style="height:400px">
        </div>

        <!-- MONACO JS -->
        <script>var require = { paths: { 'vs': '_static/js/ext/monaco-editor/min/vs' } };</script>

        <script src="_static/js/ext/monaco-editor/min/vs/loader.js"></script>
        <script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
        <script src="_static/js/ext/monaco-editor/min/vs/editor/editor.main.js"></script>

        <script>
        // CREATE AN EDITOR
        var h_div = document.getElementById('monaco_editor');
        var editor = monaco.editor.create(h_div, {
            value: [
                'function x() {',
                '\tconsole.log("Hello world!");',
                '}'
            ].join('\n'),
            language: 'javascript'
        });
        </script>
    </body>
</html>

【讨论】：