DEMO: https://ngx-codemirror.vercel.app
Latest version available for each version of Angular
@ctrl/ngx-codemirror | Angular | Codemirror |
---|---|---|
1.3.10 | 6.x 7.x | 5 |
2.2.1 | 8.x | 5 |
3.1.3 | 9.x | 5 |
4.1.1 | 10.x 11.x | 5 |
5.1.1 | 12.x-14x | 5 |
6.1.0 | 15.x | 5 |
current | >= 16.x | 5 |
An Angular component wrapper for CodeMirror that extends ngModel. Based on JedWatson/react-codemirror
tsquery playground: https://tsquery-playground.firebaseapp.com/
codemirror
is a peer dependency and must also be installed
npm install @ctrl/ngx-codemirror codemirror@5
Import CodemirrorModule
and FormsModule
and bring in the codemirror files for parsing the language you wish to use.
In your NgModule
:
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:
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';
Import the base css file and your theme
@import '~codemirror/lib/codemirror';
@import '~codemirror/theme/material';
Use The Component
<ngx-codemirror
[(ngModel)]="content"
[options]="{
lineNumbers: true,
theme: 'material',
mode: 'markdown'
}"
></ngx-codemirror>
All Inputs of ngModel and
options
- options passed to the CodeMirror instance see http://codemirror.net/doc/manual.html#configname
- name applied to the created textareaautoFocus
- setting applied to the created textareapreserveScrollPosition
- preserve previous scroll position after updating value
All outputs of ngModel and
codeMirrorLoaded
- called when codeMirror instance is initiatedfocusChange
- called when the editor is focused or loses focusscroll
- 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 moveddrop
- called when file(s) are dropped
MIT