@zakhenry/ngx-codemirror
TypeScript icon, indicating that this package has built-in type declarations

1.1.3 • Public • Published


An Angular component wrapper for CodeMirror that extends ngModel

Based on:

https://github.com/JedWatson/react-codemirror - This project is mostly a port of react-codemirror
https://github.com/chymz/ng2-codemirror - Good to reference

Install

codemirror is a peer dependency and must also be installed

npm install @zakhenry/ngx-codemirror codemirror

Use

Import CodemirrorModule and bring in the codemirror files for parsing the langague you wish to use.

// Added to NgModule
import { CodemirrorModule } from '@zakhenry/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>

Inputs

All Inputs of ngModel

  • 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
  • preserveScrollPosition - preserve previous scroll position after updating value

Outputs

All outputs of ngModel

  • focusChange - called when the editor is focused or loses focus
  • scroll - called when the editor is scrolled
  • cursorActivity - called when the text cursor is moved

License

MIT


GitHub @scttcper  ·  Twitter @scttcper

Package Sidebar

Install

npm i @zakhenry/ngx-codemirror

Weekly Downloads

2

Version

1.1.3

License

MIT

Unpacked Size

83.9 kB

Total Files

16

Last publish

Collaborators

  • zakhenry