Naughty Pinching Mannequins

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

    5.1.1 • Public • Published

    ngx-codemirror npm CircleCI coverage

    DEMO: https://ngx-codemirror.vercel.app

    Dependencies

    Latest version available for each version of Angular

    @ctrl/ngx-codemirror Angular
    1.3.10 6.x 7.x
    2.2.1 8.x
    3.1.3 9.x
    4.1.1 10.x 11.x
    current >= 12.x

    An Angular component wrapper for CodeMirror that extends ngModel. Based on JedWatson/react-codemirror

    Used in:

    tsquery playground: https://tsquery-playground.firebaseapp.com/

    Install

    codemirror is a peer dependency and must also be installed

    npm install @ctrl/ngx-codemirror codemirror

    Use

    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>

    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
    • 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

    License

    MIT


    GitHub @scttcper  ·  Twitter @scttcper

    Install

    npm i @ctrl/ngx-codemirror

    DownloadsWeekly Downloads

    19,389

    Version

    5.1.1

    License

    MIT

    Unpacked Size

    85 kB

    Total Files

    15

    Last publish

    Collaborators

    • scttcper