DEMO: https://typectrl.github.io/ngx-codemirror/
An Angular component wrapper for CodeMirror that extends ngModel
JedWatson/react-codemirror - This project is mostly a port of react-codemirror
chymz/ng2-codemirror - Good to reference
tsquery playground: https://tsquery-playground.firebaseapp.com/
codemirror
is a peer dependency and must also be installed
npm install @ctrl/ngx-codemirror codemirror
Import CodemirrorModule
and bring in the codemirror files for parsing the langague you wish to use.
// Added to NgModule
import { CodemirrorModule } from '@ctrl/ngx-codemirror';
// Import your required language in main.ts or at the root of your application
// see https://codemirror.net/mode/index.html
import 'codemirror/mode/javascript/javascript';
import 'codemirror/mode/markdown/markdown';
Import the base css file and your theme
@import "~codemirror/lib/codemirror.css";
@import "~codemirror/theme/material.css";
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
focusChange
- 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 moved
MIT