How to initialize Microsoft Monaco editor in a browser using simple JavaScript or jQuery

Question

I am trying to initialize a text/code editor using Microsoft Monaco. I would like to use core JavaScript or even jQuery but no NodeJS dependency. Is that possible?

Some relevant examples:

Get the value of Monaco Editor

Example in jsFiddle

I have the following code, which is not working:

    <!DOCTYPE html>
<html>
<head>
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
</head>
<body>

<div id="container" style="width:800px;height:600px;border:1px solid grey"></div>

<script type="text/javascript" src="https://microsoft.github.io/monaco-editor/node_modules/monaco-editor/min/vs/loader.js"></script>


<script>
require.config({ paths: { 'vs': 'monaco-editor/min/vs' }});
require(['vs/editor/editor.main'], function() {
    window.editor = monaco.editor.create(document.getElementById('container'),                 {
        value: [
            'function x() {',
            '\tconsole.log("Hello world!");',
            '}'
        ].join('\n'),
        language: 'javascript'
    });
});

function save() {
   // get the value of the data
   var value = window.editor.getValue()
   saveValueSomewhere(value);     
}


</script>
</body>
</html>

Can anyone help?

score 29 · Accepted Answer · edited Feb 25 '20 at 11:36

29

I've added a working example below. Regarding your other question:

I would like to use core JavaScript or even jQuery but no NodeJS dependency. Is that possible?

monaco-editor IS written in JavaScript (TypeScript compiled to JavaScript) and does not use jQuery. Node is not really relevant in the context you've described.

Please let me know if this helps.

require.config({ paths: { 'vs': 'https://unpkg.com/monaco-editor@latest/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
 self.MonacoEnvironment = {
  baseUrl: 'https://unpkg.com/monaco-editor@latest/min/'
 };
 importScripts('https://unpkg.com/monaco-editor@latest/min/vs/base/worker/workerMain.js');
`], { type: 'text/javascript' }));

require(["vs/editor/editor.main"], function () {
 let editor = monaco.editor.create(document.getElementById('container'), {
  value: [
   'function x() {',
   '\tconsole.log("Hello world!");',
   '}'
  ].join('\n'),
  language: 'javascript',
  theme: 'vs-dark'
 });
});

html, body, #container {
 position: absolute;
 left: 0;
 top: 0;
 width: 100%;
 height: 100%;
 margin: 0;
 padding: 0;
 overflow: hidden;
}

<script src="https://unpkg.com/monaco-editor@latest/min/vs/loader.js"></script>
<div id="container"></div>

edited Feb 25 '20 at 11:36

Pranav

674
1
6
23

answered Jul 16 '19 at 14:08

Peter

2,796
1
17
29

1

This works great, thank you. I wanted to be able to load Monaco on demand and now I can. – James Jul 18 '19 at 06:41
1

Works great. Thank you! – Geocrafter Jul 23 '19 at 16:45
1

Any way of doing this without using require.js? – Alvaro Jun 26 '20 at 11:37
1

@Alvaro check out the examples repo: https://github.com/Microsoft/monaco-editor-samples/ – Peter Jun 27 '20 at 17:48
3

@Alvaro this isn't using RequireJS. Microsoft created it's own `require` object that it uses to configure Monaco, but it's not RequireJS (although it shares the same object name). – Katie Dec 01 '20 at 21:07
@Peter Is there a way to bundle this with webpack? This results in a 'Module not found' error for me. – Inbar Azulay Apr 12 '21 at 14:34
@InbarAzulay sure, but you must follow the stated rules of this website and create a NEW, well-formed question. – Peter Apr 12 '21 at 15:25
@Peter of course. I've done this at: https://stackoverflow.com/questions/67059283/error-cant-resolve-vs-editor-editor-main-in-when-lazy-loading-monaco-e but didn't get any responses yet – Inbar Azulay Apr 13 '21 at 07:33
See https://jsfiddle.net/Abeeee/eajgr2y9/ for a jsfiddle working example – user1432181 Jan 16 '23 at 18:35

score 2 · Answer 2 · answered Aug 14 '22 at 03:23

You can also add editor as simple js code without requirejs.

Download repo from monaco-editor
Build monaco-editor for browser

cd monaco-editor && npm run build-website

You can copy module from website/node_modules/monaco-editor folder created after build,

<!DOCTYPE html>
<html>
  <head>
      <meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
      <link
          rel="stylesheet"
          data-name="vs/editor/editor.main"
          href="../node_modules/monaco-editor/min/vs/editor/editor.main.css"
      />
  </head>
  <body>
      <h2>Monaco Editor Sync Loading Sample</h2>
      <div id="container" style="width: 800px; height: 600px; border: 1px solid grey"></div>

      <script>
          var require = { paths: { vs: '../node_modules/monaco-editor/min/vs' } };
      </script>
      <script src="../node_modules/monaco-editor/min/vs/loader.js"></script>
      <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.nls.js"></script>
      <script src="../node_modules/monaco-editor/min/vs/editor/editor.main.js"></script>

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

How to initialize Microsoft Monaco editor in a browser using simple JavaScript or jQuery

2 Answers2