ngx-simple-text-editor

Ngx Simple Text editor

Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+.

Version compatibility

Angular version	Ngx simple text editor version	Font awesome version
9 - 13	0.0.0 - 1.x.x	5.0.0-6.x.x
14	2.x.x	5.0.0-6.x.x
15	3.x.x	5.0.0-6.x.x
16	4.x.x	5.0.0-6.x.x
17	5.x.x	5.0.0-6.x.x

Instalation

npm install ngx-simple-text-editor --save

then add NgxSimpleTextEditorModule into module imports

import {NgxSimpleTextEditorModule} from 'ngx-simple-text-editor';

@NgModule({
// ...
  imports: [
    // ...
    NgxSimpleTextEditorModule,
    // ...
  ],
// ...
})

If you want to use default button icons, you must install Font awesome. npm install @fortawesome/fontawesome-free and declare in styles in angular.json

...
"styles": [
  "src/styles.scss",
  "node_modules/@fortawesome/fontawesome-free/css/all.css"
]
...

Usage

You can use Ngx simple text editor as classic template-driven form input or as reactive form input.

<st-editor [(ngModel)]="content" [config]="config"></st-editor>

The editor has got only one @Input with config object, which is optional. The config object is defined by placeholder and buttons, both are optional and can be omitted.

import { Component } from '@angular/core';
import {EditorConfig, ST_BUTTONS} from 'ngx-simple-text-editor';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
  styleUrls: ['./app.component.scss']
})
export class AppComponent {
  content = '';
  config: EditorConfig = {
    placeholder: 'Type something...',
    buttons: ST_BUTTONS,
  };
}

You can pass all predefined buttons with predefined order, or you can use only buttons you want with order as you want.

import {EditorConfig, UNDO_BUTTON, SEPARATOR, BOLD_BUTTON, ITALIC_BUTTON} from 'ngx-simple-text-editor';
...
config: EditorConfig = {
    buttons: [UNDO_BUTTON, SEPARATOR, BOLD_BUTTON, ITALIC_BUTTON],
  };
...

Demo

Online demo or Stackblitz coming soon.

License

MIT