monaco-editor-es
v0.30.1
Published
Monaco Editor Builds for ESM
Downloads
36
Maintainers
Readme
Installation
npm i monaco-editor-es
Usage
Step 1 - Import the script
import '../node_modules/monaco-editor-es/editor.main.js'
Step 2 - Define where the workers are located
const workersDir = new URL('../node_modules/monaco-editor-es/workers/', import.meta.url)
self.MonacoEnvironment = {
getWorkerUrl: function (moduleId, label) {
switch(label) {
case 'json':
return `${workersDir}json.worker.js`
case 'css':
return `${workersDir}css.worker.js`
case 'html':
return `${workersDir}html.worker.js`
case 'typescript':
case 'javascript':
return `${workersDir}ts.worker.js`
default:
return `${workersDir}editor.worker.js`
}
}
}
Step 3 - Create the MonacoEditor
monaco.editor.create(document.getElementById('#editor'), {
language: 'javascript,
theme: 'vs-dark'
})
For more info on Monaco Editor see the Official Documentation