@nomadreservations/ngx-codemirror
v2.0.0
Published
`@nomadreservations/ngx-codemirror` [CodeMirror (5.x)](http://codemirror.net/) code editor in your Angular application. Server Side Rendering(SSR) compliant and @angular 6+ Ready.
Downloads
396
Readme
@nomadreservations/ngx-codemirror
@nomadreservations/ngx-codemirror
CodeMirror (5.x) code editor in your Angular application. Server Side Rendering(SSR) compliant and @angular 6+ Ready.
Note: If you're looking for @angular 5 support please use version 1.0.x
Originally derived from ng2-codemirror
Table of Contents:
- 1. Installation
- 2. Project structure
- 3. Testing
- 4. Building
- 5. Publishing
- 6. Documentation
- 7. Using the library
- 8. License
1. Installation
To use @nomadreservations/ngx-codemirror in your project install it via npm:
npm i @nomadreservations/ngx-codemirror codemirror --save
npm i @types/codemirror --save-dev
or
yarn add @nomadreservations/ngx-codemirror codemirror
yarn add --dev @types/codemirror --save-dev
2. Project structure
- Library:
- src folder for the classes
- src/lib/public_api.ts entry point for all public APIs of the package
- package.json npm options
3. Testing
The following command run unit & integration tests that are in the tests
folder (you can change the folder in spec.bundle.js
file):
yarn test
It also reports coverage using Istanbul.
4. Building
The following command:
yarn build
To test locally the npm package:
yarn pack-lib
Then you can install it in an app to test it:
yarn add [path]@nomadreservations/ngx-codemirror-[version].tgz
5. Publishing
Before publishing the first time:
- you can register your library on Travis CI: you have already configured
.travis.yml
file - you must have a user on the npm registry: Publishing npm packages
yarn publish-lib
6. Documentation
To generate the documentation, this project uses compodoc:
yarn docs:watch
yarn compodoc
7. Using the library
7.1. Installing
npm install @nomadreservations/ngx-codemirror --save
Then you need to include base CSS of codemirror located in codemirror/lib/codemirror.css
7.2. Sample
Include CodemirrorModule
in your main module :
import { CodemirrorModule } from '@nomadreservations/ngx-codemirror';
@NgModule({
// ...
imports: [
CodemirrorModule
],
// ...
})
export class AppModule { }
import { Component } from '@angular/core';
import { CodemirrorService } from '@nomadreservations/ngx-codemirror';
@Component({
selector: 'sample',
template: `
<ngx-codemirror [(ngModel)]="code"
[config]="{...}"
(focus)="onFocus()"
(blur)="onBlur()">
</ngx-codemirror>
`
})
export class Sample{
constructor(
private _codeMirror: CodemirrorService,
) { }
public ngOnInit() {
this._codeMirror.instance$.subscribe((editor) => {
console.log(editor.state);
});
}
}
7.3. Configuration
config
: The configuration object for CodeMirror see http://codemirror.net/doc/manual.html#config
7.4. Loading
Using SystemJS configuration
System.config({
map: {
'@nomadreservations/ngx-codemirror': 'node_modules/@nomadreservations/ngx-codemirror/bundles/@nomadreservations/ngx-codemirror.umd.js'
}
});
Angular-CLI
No need to set up anything, just import it in your code.
Rollup or webpack
No need to set up anything, just import it in your code.
Plain JavaScript
Include the umd
bundle in your index.html
:
<script src="node_modules/@nomadreservations/ngx-codemirror/bundles/@nomadreservations/ngx-codemirror.umd.js"></script>
and use global nomadreservations.ngxCodemirror
namespace.
7.5. AoT compilation
The library is compatible with AoT compilation.
8. License
MIT