Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/stevermeister/ngx-wig
Angular(also Angular 17) WYSIWYG HTML Rich Text Editor (from ngWig - https://github.com/stevermeister/ngWig)
https://github.com/stevermeister/ngx-wig
angular angular10 angular11 angular2 angular7 angular8 angular9 ngwig text-editor wysiwyg
Last synced: 3 months ago
JSON representation
Angular(also Angular 17) WYSIWYG HTML Rich Text Editor (from ngWig - https://github.com/stevermeister/ngWig)
- Host: GitHub
- URL: https://github.com/stevermeister/ngx-wig
- Owner: stevermeister
- License: apache-2.0
- Created: 2016-01-08T14:18:08.000Z (over 8 years ago)
- Default Branch: master
- Last Pushed: 2024-04-10T13:08:29.000Z (3 months ago)
- Last Synced: 2024-04-10T22:02:00.352Z (3 months ago)
- Topics: angular, angular10, angular11, angular2, angular7, angular8, angular9, ngwig, text-editor, wysiwyg
- Language: TypeScript
- Homepage:
- Size: 5.19 MB
- Stars: 218
- Watchers: 10
- Forks: 50
- Open Issues: 5
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Lists
- awesome-wysiwyg-editors - ngx-wig - Angular WYSIWYG HTML富文本编辑器（灵感来自 AngularJS [ngWig](https://github.com/stevermeister/ngWig)）  (基于 Angular)
- awesome-angular - ngx-wig - Angular(Angular 5, Angular 6) WYSIWYG HTML Rich Text Editor. (Uncategorized / Uncategorized)
- awesome-angular-ru - ngx-wig - Самый лёгкий WYSIWYG редактор на Angular, с поддержкой плагинов (Инструменты)
- awesome-angular - ngx-wig - Angular(also Angular 17) WYSIWYG HTML Rich Text Editor. (Table of contents / Third Party Components)
README
# ngx-wig
[](https://travis-ci.org/stevermeister/ngx-wig)
## Dependencies
*it's only Angular! No jQuery or other WYSIWYG monsters*
## Angular Support (older than the latest version)
For **Angular 16** `[email protected]`
For **Angular 15** `[email protected]`
For **Angular 14** `[email protected]`
For **Angular 13** `[email protected]`
...
## Icons
Icons are not in the pack!
You can use the icons that you like.
We recommend to use [Material Design Icons](https://cdn.materialdesignicons.com/2.1.19/css/materialdesignicons.min.css)
If you do not want to use a full icons set, you can use these steps:
1. go to [icons set](https://materialdesignicons.com/)
1. choose the icon that you want, press the right mouse button on it, and then select the "View SVG" option
1. go to [URL-encoder for SVG](https://yoksel.github.io/url-encoder/) and use it to convert your SVG
## Installation
ngx-wig could be simply installed via npm:
npm install ngx-wig
## Usage
First, import the ngx-wig to your module:
```typescript
import {NgxWigModule} from 'ngx-wig';
@NgModule({
imports: [ NgxWigModule ]
});
```
it's just an attribute directive for textarea:
```html
...
```
## Examples
### Quick start ( [demo](https://stackblitz.com/edit/ngx-wig-sample2?file=src%2Fapp.ts) )
```html
```
### Placeholder ( [demo](https://stackblitz.com/edit/ngx-wig-sample3?file=src/app.ts) )
```html
```
### ngModel sync ( [demo](https://stackblitz.com/edit/ngx-wig-sample4?file=src/app.ts) )
```html
```
### Set buttons ( [demo](https://stackblitz.com/edit/ngx-wig-sample5?file=src/app.ts) )
```html
```
### onContentChange Hook ( [demo](https://stackblitz.com/edit/ngx-wig-sample6?file=src/app.ts) )
```html
```
### Reactive FormControl ( [demo](https://stackblitz.com/edit/ngx-wig-sample7?file=src/app.ts) )
```html
```
### Two-way binding ( [demo](https://stackblitz.com/edit/ngx-wig-sample8?file=src/app.ts) )
```html
```
### Adding own buttons
Please check an example here
https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts
## Development
To generate all `*.js`, `*.d.ts` and `*.metadata.json` files:
```bash
$ npm run build
```
To lint all `*.ts` files:
```bash
$ npm run lint
```
To run all tests:
```bash
$ npm run test
```
## License
MIT © [Stepan Suvorov](https://github.com/stevermeister)