如何在没有安装Node.js的情况下使用Monaco编辑器

Question

如何在没有安装Node.js的情况下使用Monaco编辑器

6

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

我发现@SimperT在如何在没有nodejs和electron的网页上实现monaco-editor中给出了一个好的答案，但他的存储库已过时（JavaScript是一个狂野的世界），而且我还有一个额外的约束条件，即只能本地提供文件（没有cdn，这是一个内部网络，没有外部访问）。

所以，这有点像瓶子里的信，但如果有人知道或指导如何做到这一点，我全神贯注...（如果我找到了解决方案，我会在这里发布）

- yota

2

Monaco是纯客户端的。你说的“没有Node.js”是什么意思？你是指没有npm吗？ - Guy Incognito

2

@GuyIncognito 嗯... 很明显我在这里漏掉了什么... 我能使用npm来检索所有内容并使用其他方式提供服务吗？https://github.com/microsoft/monaco-editor-samples/tree/master/browser-script-editor 的确让我有了新的理解方式... - yota

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- yota · Accepted Answer

问题有点笨重，但愿我的错误能为他人带来益处：问题出在未正确设置的require变量中。

使用此处找到的软件包：https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.23.0.tgz

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

这是使用cherrypy服务的HTML页面：

<!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>