Angular4/5 - Monaco editor component
Monaco Editor Angular4/5 component. Based on chrisber gist.
Component is being used as part of an application and thus tailored to suit those requirements, feel free to contribute and make it better, or just use it as an inspiration for your next project.
There are no tests, no builds, just the component.
Know issues (please read)
Due to the way AMD is being used by Monaco, there is currently no graceful way to integrate Monaco into webpack Relevant discussion on github.
For this reason, ng2-monaco-editor expects Monaco src files to be publicly accessible. This can be achieved in many ways, chrisber's gist suggests a simple symlink:
mkdir -p src/assets/monaco && cd src/assets/monaco && ln -s ../../../node_modules/monaco-editor/min/vs .
Another way would be to rely on a webpack plugin:
plugins: ,
Whatever method you are willing to use, this component expects Monaco src files to be situated in /src/assets/monaco
Installation
npm install monaco-editor --save
npm install ng2-monaco-editor --save
- Copy Monaco src into src/assets/monaco, please refer to Known issues section for detailed information.
- Import MonacoEditorComponent in your app.module.ts
import { MonacoEditorComponent } from 'ng2-monaco-editor';
- Add to your declarations
Sample
;
Options
This component exposes monaco options as well as language defaults. Language defaults are loaded according to whatever language you initialised the component. If you set language to javascript, all of the language defaults will be automatically applied to javascript.
Custom Options
This component exposes custom options that require more substantial changes to the component. This is currently an experimental feature.
- customPreventCarriageReturn: Prevents any "Enter" key press to be registered. Useful for setting up single line editors.
Follows an example.
;