dt-monaco-editor
v0.10.5
Published
CommonJS/Webpack compatible Monaco editor
Downloads
4
Maintainers
ascodersReadme
@timkendrick/monaco-editor
CommonJS/Webpack compatible Monaco editor
This module exports a prebuilt UMD bundle that exposes a standalone Monaco editor.
Installation
npm install @timkendrick/monaco-editor --saveUsage
The 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.
Importing the standalone version
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(...);Using the external version
Setup
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>Importing the external version
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(...);Editor API
For full usage instructions, see the Monaco API Docs.
Configuration
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.
Building from source
git clone https://github.com/timkendrick/monaco-editor.git
cd monaco-editor
git submodule update --init
npm install
npm run build