Home

Awesome

npm version demo npm bundle size NPM CircleCI Coverage Status npm GitHub Repo stars

ngc simple text editor logo

Ngx Simple Text editor

Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+. The key features of this editor are simplicity, cross-browser compatibility, and extensibility.

demo

Content

🔗 Compatibility

Angular versionNgx simple text editor versionFont awesome version
9 - 130.0.0 - 1.x.x5.0.0-6.x.x
142.x.x5.0.0-6.x.x
153.x.x5.0.0-6.x.x
164.x.x5.0.0-6.x.x
175.x.x5.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,
  };
}

📚 Documentation and demos

Online documentation and demos

📖 License

MIT