CodeMirror wrapper for Angular
npm install @harrison4ever/ngx-codemirrorcodemirror is a peer dependency and must also be installed
sh
npm install @ctrl/ngx-codemirror codemirror
`
Use
Import CodemirrorModule and FormsModule and bring in the codemirror files for parsing the langague you wish to use.
In your NgModule:
`ts
import { FormsModule } from '@angular/forms';
import { NgModule } from '@angular/core';
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
// add to imports:
imports: [
BrowserModule,
FormsModule,
CodemirrorModule,
...
]
`
In your main.ts or at the root of your application, see documentation:
`ts
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';
import 'codemirror/addon/display/placeholder';
`
Import the base css file and your theme
`scss
@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';
`
Use The Component
`html
[(ngModel)]="content"
[options]="{
lineNumbers: true,
theme: 'material',
mode: 'markdown'
}"
>
`
Inputs
All Inputs of ngModel and
- options - options passed to the CodeMirror instance see http://codemirror.net/doc/manual.html#config
- name - name applied to the created textarea
- autoFocus - setting applied to the created textarea
- placeholder - placeholder for empty created textarea
- preserveScrollPosition - preserve previous scroll position after updating value
Outputs
All outputs of ngModel and
- focusChange - called when the editor is focused or loses focus
- scroll - called when the editor is scrolled (not wrapped inside angular change detection must manually trigger change detection or run inside ngzone)
- cursorActivity - called when the text cursor is moved
- drop` - called when file(s) are dropped