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: 28 days 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 (almost 9 years ago)
• Default Branch: master
• Last Pushed: 2024-09-23T22:55:26.000Z (about 2 months ago)
• Last Synced: 2024-09-28T17:04:05.459Z (about 1 month ago)
• Topics: angular, angular10, angular11, angular2, angular7, angular8, angular9, ngwig, text-editor, wysiwyg
• Language: TypeScript
• Homepage:
• Size: 6.39 MB
• Stars: 229
• Watchers: 11
• Forks: 51
• Open Issues: 5
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-angular - ngx-wig - Angular(Angular 5, Angular 6) WYSIWYG HTML Rich Text Editor. (Uncategorized / Uncategorized)
• awesome-wysiwyg-editors - ngx-wig - Angular WYSIWYG HTML 富文本编辑器（灵感来自 AngularJS [ngWig](https://github.com/stevermeister/ngWig)）  (基于 Angular)
• awesome-angular - ngx-wig - Angular(also Angular 17) WYSIWYG HTML Rich Text Editor. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-wig - Angular(also Angular 17) WYSIWYG HTML Rich Text Editor. (Table of contents / Third Party Components)
• fucking-awesome-angular - ngx-wig - Angular(also Angular 17) WYSIWYG HTML Rich Text Editor. (Table of contents / Third Party Components)

README

        
# ngx-wig

[![Build Status](https://travis-ci.org/stevermeister/ngx-wig.svg?branch=master)](https://travis-ci.org/stevermeister/ngx-wig)

![screen shot 2017-12-12 at 14 52 51](https://user-images.githubusercontent.com/1526680/33888069-37bde1f0-df4c-11e7-993e-d48ffe0fffbf.png)

## 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/stackblitz-starters-61ajke?file=src%2Fmain.ts) )

```html

```

### Placeholder ( [demo](https://stackblitz.com/edit/stackblitz-starters-5lq68z?file=src%2Fmain.ts) )

```html

```

### ngModel sync ( [demo](https://stackblitz.com/edit/stackblitz-starters-go26xc?file=src%2Fmain.ts) )

```html

```

### Set buttons ( [demo](https://stackblitz.com/edit/stackblitz-starters-qohotg?file=src%2Fmain.ts) )

```html

```

### onContentChange Hook ( [demo](https://stackblitz.com/edit/stackblitz-starters-cl6k3s?file=src%2Fmain.ts) )

```html



```


### Reactive FormControl ( [demo](https://stackblitz.com/edit/stackblitz-starters-hgna7m?file=src%2Fmain.ts) )

```html

```

### Adding own buttons

Please check an example here

https://stackblitz.com/edit/ngx-wig-sample-plugins?file=src/app.ts

### Filtering/removing extra styles on paste ( [demo](https://stackblitz.com/edit/stackblitz-starters-ysmo2d?file=src%2Fmain.ts) )

```typescript

providers: [{ provide: NgxWigFilterService, useClass: NgxWigFilterStylesService}]

```

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