Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/Raiper34/ngx-simple-text-editor
Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+.
https://github.com/Raiper34/ngx-simple-text-editor
angular angular15 editor text text-editor wysiwyg wysiwyg-editor
Last synced: about 1 month ago
JSON representation
Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+.
- Host: GitHub
- URL: https://github.com/Raiper34/ngx-simple-text-editor
- Owner: Raiper34
- License: mit
- Created: 2022-06-17T23:15:22.000Z (about 2 years ago)
- Default Branch: main
- Last Pushed: 2024-04-01T17:43:40.000Z (3 months ago)
- Last Synced: 2024-05-03T17:48:32.988Z (2 months ago)
- Topics: angular, angular15, editor, text, text-editor, wysiwyg, wysiwyg-editor
- Language: TypeScript
- Homepage: https://ngx-simple-text-editor.netlify.app
- Size: 3.05 MB
- Stars: 5
- Watchers: 2
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE
Lists
- awesome-angular - ngx-simple-text-editor - Ngx Simple Text editor or ST editor is a simple native text editor component for Angular 9+. (Table of contents / Third Party Components)
README
[](https://badge.fury.io/js/ngx-simple-text-editor)
[](https://circleci.com/gh/Raiper34/ngx-simple-text-editor)
[](https://coveralls.io/github/Raiper34/ngx-simple-text-editor?branch=main)
[](https://github.com/Raiper34/ngx-simple-text-editor/issues)
[](https://ngx-simple-text-editor.netlify.app/)
# 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
```typescript
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
```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.
```angular2html
```
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.
```typescript
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.
```typescript
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](https://ngx-simple-text-editor.netlify.app/)
or Stackblitz coming soon.
# License
MIT