https://github.com/web-acad/ng-codemirror

CodeMirror form component for angular
https://github.com/web-acad/ng-codemirror

angular codemirror forms

Last synced: 7 days ago
JSON representation

CodeMirror form component for angular

• Host: GitHub
• URL: https://github.com/web-acad/ng-codemirror
• Owner: Web-ACAD
• License: mit
• Created: 2018-05-04T16:02:37.000Z (almost 7 years ago)
• Default Branch: master
• Last Pushed: 2018-08-24T13:02:59.000Z (over 6 years ago)
• Last Synced: 2025-01-08T22:08:30.755Z (about 1 month ago)
• Topics: angular, codemirror, forms
• Language: TypeScript
• Size: 8.79 KB
• Stars: 0
• Watchers: 2
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
[![NPM version](https://img.shields.io/npm/v/@webacad/ng-codemirror.svg?style=flat-square)](https://www.npmjs.com/package/@webacad/ng-codemirror)

[![Build Status](https://img.shields.io/travis/Web-ACAD/ng-codemirror.svg?style=flat-square)](https://travis-ci.org/Web-ACAD/ng-codemirror)

# WebACAD/CodeMirror

CodeMirror form component for angular.

## Dependencies

* `@angular/common`

* `@angular/core`

* `@angular/forms`

* `codemirror`

* `rxjs`

## Installation

```bash

$ npm install --save @webacad/ng-codemirror

```

or with yarn

```bash

$ yarn add @webacad/ng-codemirror

```

## Register module

**app.module.ts:**

```typescript

import {CodemirrorModule} from '@webacad/ng-codemirror';

@NgModule({

	imports: [

		CodemirrorModule,

	],

})

export class AppModule {}

```

## Usage

```html

```

**Available options:**

* `mode`: codemirror `mode` option

* `theme`: codemirror `theme` option

* `lineNumbers`: codemirror `lineNumbers` option

* `viewportMargin`: codemirror `viewportMargin` option

## Using in angular forms

This package implements all the necessary code for angular forms. That means that you can use it just like any other 

ordinary form control.

## App-wide configuration

The component itself provides only a few options for codemirror. If you need to have more control over the codemirror 

or if you want to configure it globally, use the `WA_CODEMIRROR_DEFAULTS` injection token:

```typescript

import * as CodeMirror from 'codemirror';

export const AppCodeMirrorConfiguration: CodeMirror.EditorConfiguration = {

	lineNumbers: true,

	theme: 'material',

};

```

and register it in your app module:

```typescript

import {CodemirrorModule, WA_CODEMIRROR_DEFAULTS} from '@webacad/ng-codemirror';

import {AppCodeMirrorConfiguration} from './codemirror-configuration';

@NgModule({

	imports: [

		CodemirrorModule,

	],

	providers: [

		{

			provide: WA_CODEMIRROR_DEFAULTS,

			useValue: CodeMirrorConfiguration,

		},

	],

})

export class AppModule {}

```