CODEWITHSUNDEEP
javascriptjquerymonaco-editor
Geocrafter
Geocrafter

Reputation: 815

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

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?

Upvotes: 22

Views: 26215

Answers (2)

Madan Ram
Madan Ram

Reputation: 876

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

  1. Download repo from monaco-editor

  2. Build monaco-editor for browser

cd monaco-editor && npm run build-website

  1. 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>

Upvotes: 1

Peter
Peter

Reputation: 2927

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>

Upvotes: 34

Related Questions