6

I need to integrate monaco-editor on a web page with a pure client-side solution, and without node.js.

I found an nice answer by @SimperT How to implement monaco-editor on a webpage without nodejs and electron but his repository is outdated (js is a wild world), and I had an extra constraint that files can only be served locally (no cdn, its for an intranet, without external access).

So, this is a bit a message in a bottle, but if someone has clues or directions on how to do it, I'm all ear... (If I come up with a solution, I'll post it here)

yota
  • 2,020
  • 22
  • 37
  • 2
    Monaco *is* purely client-side. What do you mean "without Node.js"? Do you mean without npm? – Guy Incognito May 30 '20 at 08:41
  • 2
    @GuyIncognito well... Clearly I do miss something here... Can I use npm to retrieve everything and serve it with something else ? https://github.com/microsoft/monaco-editor-samples/tree/master/browser-script-editor gave me indeed new ways to understand what I'm doing... – yota May 30 '20 at 09:00

1 Answers1

13

The question was a bit clunky. Nonetheless, may my errors benefit to others: the issue was in the require variable which was not properly set.

With the package found here : https://registry.npmjs.org/monaco-editor/-/monaco-editor-0.23.0.tgz

Unzipped and properly served statically. Path is monaco-editor-x.xx.x/package/min/vs/[editor/].

Here is the html page served (with 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>
NoxFly
  • 179
  • 1
  • 12
yota
  • 2,020
  • 22
  • 37
  • Had this same issue and your answer helped me out. Following official repo instructions did not work for me. Thanks a lot. Your download link works for the latest version (0.32.0) too. What's the unsetted variable that makes this difference ? – Danmaxis Aug 03 '22 at 14:41
  • @Danmaxis I must confess I have no idea ! javascript package handling is still a big mystery for me :D And I can't spend time testing to understand, but I would be happy to see an answer published here... – yota Aug 09 '22 at 09:53