CommonJS/Webpack compatible Monaco editor
This module exports a prebuilt UMD bundle that exposes a standalone Monaco editor.
npm install @timkendrick/monaco-editor --saveThe editor comes in two versions: standalone and external.
In the standalone version, the accompanying CSS and web worker scripts are all compiled into the main JavaScript bundle, avoiding the need to serve external assets separately.
In the external version, the accompanying CSS and web worker scripts are provided as separate assets that must be served separately.
As a CommonJS module:
const monaco = require('@timkendrick/monaco-editor');
monaco.editor.create(...);As an ECMAScript module:
import * as monaco from '@timkendrick/monaco-editor';
monaco.editor.create(...);As a global variable:
window.monaco.editor.create(...);Additional CSS and worker scripts are located in the dist/external directory. These must be loaded by the browser at runtime.
The monaco.css file must be loaded as a stylesheet, and the path to directory containing the worker scripts can be specified as window.MonacoEnvironment.baseUrl:
<html>
<head>
<link rel="stylesheet" href="node_modules/@timkendrick/monaco-editor/dist/external/monaco.css" />
</head>
<body>
<script>
window.MonacoEnvironment = {
baseUrl: 'node_modules/@timkendrick/monaco-editor/dist/external',
};
</script>
<script src="index.js"></script>
</body>
</html>As a CommonJS module:
const monaco = require('@timkendrick/monaco-editor/dist/external');
monaco.editor.create(...);As an ECMAScript module:
import * as monaco from '@timkendrick/monaco-editor/dist/external';
monaco.editor.create(...);As a global variable:
window.monaco.editor.create(...);For full usage instructions, see the Monaco API Docs.
The editor configuration is based on the AMD version in the Microsoft/monaco-editor repository.
To generate custom builds, see the @timkendrick/monaco-editor-loader Webpack loader.
git clone https://github.com/timkendrick/monaco-editor.git
cd monaco-editor
git submodule update --init
npm install
npm run build