https://github.com/worktile/ng-codemirror
Codemirror binding for Angular
https://github.com/worktile/ng-codemirror
Last synced: 7 months ago
JSON representation
Codemirror binding for Angular
- Host: GitHub
- URL: https://github.com/worktile/ng-codemirror
- Owner: worktile
- Created: 2020-03-05T13:40:57.000Z (about 6 years ago)
- Default Branch: master
- Last Pushed: 2024-11-15T10:50:54.000Z (over 1 year ago)
- Last Synced: 2024-11-15T11:18:42.135Z (over 1 year ago)
- Language: TypeScript
- Homepage:
- Size: 6.09 MB
- Stars: 17
- Watchers: 7
- Forks: 4
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
Awesome Lists containing this project
README
# Angular - Codemirror component
codemirror component for Angular（^8.0+）
Has been formally verified by the production environment。
## Features
- support copy text in readOnly 'nocursor' mode.
- ensure init codemirror after nativeElement has been attached （codemirror need a real element width）.
- support flexiable height by autoMaxHeight.
- support all options by codemirror（^5.52.0）.
## Alternatives
- [ngx-codemirror](https://github.com/TypeCtrl/ngx-codemirror): An Angular component wrapper for CodeMirror that extends ngModel.
## Installation
```bash
$ npm i ng-codemirror --save
// or
$ yarn add ng-codemirror
```
## Usage
Import `CodemirrorModule` and bring in the [codemirror files for parsing the langague](https://codemirror.net/mode/index.html) you wish to use.
In your `NgModule`:
```ts
import { NgModule } from '@angular/core';
import { CodemirrorModule } from 'ng-codemirror';
// add to imports:
imports: [
BrowserModule,
CodemirrorModule,
...
]
```
In your `main.ts` or at the root of your application, see [documentation](https://codemirror.net/mode/index.html):
```ts
import "codemirror/mode/javascript/javascript";
import "codemirror/mode/markdown/markdown";
```
Import the scss file
```scss
@import "~ng-codemirror/index.scss";
```
Use The Component
```html
```
```TS
// options 配置
options = {
lineNumbers: true,
readOnly: false, // nocursor can not copy
mode: 'javascript',
autofocus: true,
lineWiseCopyCut: true,
cursorBlinkRate: 500 // hide cursor
};
```