Monaco Editor

by ckissi

HTML

<script src="https://unpkg.com/[email protected]/min/vs/loader.js"></script>
<div id="container"></div>
<div id="container1"></div>

CSS

#container, #container1 {
	width: 100%;
  height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
}

Babel + JSX

require.config({ paths: { 'vs': 'https://unpkg.com/[email protected]/min/vs' }});
window.MonacoEnvironment = { getWorkerUrl: () => proxy };

let proxy = URL.createObjectURL(new Blob([`
	self.MonacoEnvironment = {
		baseUrl: 'https://unpkg.com/[email protected]/min/'
	};
	importScripts('https://unpkg.com/[email protected]/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'
	});
	
	editor.addListener('didType', () => {
		console.log(editor.getValue());
	});
  
  let editor1 = monaco.editor.create(document.getElementById('container1'), {
		value: [
			'function x() {',
			'\tconsole.log("Hello world!");',
			'}'
		].join('\n'),
		language: 'html',
		theme: 'vs-dark'
	});
  
  editor1.setValue('<h1>Bla</h1>');
	
	editor1.addListener('didType', () => {
		console.log(editor.getValue());
	});
  
  editor.onDidChangeModelContent((e) => {
                /* this.monacoContent = editor.getValue();
                this.updatePlaceholder(editor.getValue());
                clearTimeout(typingTimer);
                typingTimer = setTimeout(() => this.$dispatch('content-updated', { content: this.monacoContent }), 500);
                     */
                console.log(this.monacoContent);
            });
});