ngx-simple-text-editor
v5.0.0
Published
Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+.
Downloads
5,007
Maintainers
Readme
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 |
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