Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

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: 23 days 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 (over 2 years ago)
Default Branch: main
Last Pushed: 2024-10-19T14:05:30.000Z (about 2 months ago)
Last Synced: 2024-11-11T02:12:10.322Z (about 1 month ago)
Topics: angular, angular15, editor, text, text-editor, wysiwyg, wysiwyg-editor
Language: TypeScript
Homepage: https://ngx-simple-text-editor.netlify.app
Size: 4.61 MB
Stars: 8
Watchers: 1
Forks: 2
Open Issues: 3
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- License: LICENSE

Awesome Lists containing this project

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)
fucking-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)
fucking-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

        [![npm version](https://badge.fury.io/js/ngx-simple-text-editor.svg)](https://badge.fury.io/js/ngx-simple-text-editor)

[![demo](https://badgen.net/badge/demo/online/orange)](https://ngx-simple-text-editor.netlify.app/)

![npm bundle size](https://img.shields.io/bundlephobia/min/ngx-simple-text-editor)

![NPM](https://img.shields.io/npm/l/ngx-simple-text-editor)

[![CircleCI](https://circleci.com/gh/Raiper34/ngx-simple-text-editor.svg?style=shield)](https://circleci.com/gh/Raiper34/ngx-simple-text-editor)

[![Coverage Status](https://coveralls.io/repos/github/Raiper34/ngx-simple-text-editor/badge.svg?branch=main)](https://coveralls.io/github/Raiper34/ngx-simple-text-editor?branch=main)

[![npm](https://img.shields.io/npm/dt/ngx-simple-text-editor)](https://badge.fury.io/js/ngx-simple-text-editor)

[![](https://data.jsdelivr.com/v1/package/npm/ngx-simple-text-editor/badge?style=rounded)](https://www.jsdelivr.com/package/npm/ngx-simple-text-editor)

[![GitHub Repo stars](https://img.shields.io/github/stars/raiper34/ngx-simple-text-editor)](https://github.com/Raiper34/ngx-simple-text-editor)

![ngc simple text editor logo](assets/logo.svg)

# 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](assets/demo.gif)

### Content

- [🔗 Compatibility](#-compatibility)

- [🚀 Instalation](#-instalation)

- [💻 Usage](#-usage)

- [📚 Documentation and demos](#-documentation-and-demos)

- [📖 License](#-license)

## 🔗 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,

  };

}

```

## 📚 Documentation and demos

[Online documentation and demos](https://ngx-simple-text-editor.netlify.app/)

## 📖 License

MIT