# ngx-trumbowyg

> This an Angular wrapper for [Trumbowyg WYSIWYG editor](https://alex-d.github.io/Trumbowyg/).

Latest version **6.0.7** (published 2018-11-21) · MIT license · 0 weekly downloads

## Install

```sh
npm install ngx-trumbowyg
pnpm add ngx-trumbowyg
yarn add ngx-trumbowyg
bun add ngx-trumbowyg
```

## Health

**Score 25/100 (F)** — status: abandoned.

Positive: has types; esm support; no vulnerabilities.

Warnings: low downloads.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 6.0.7 |
| Published | 2018-11-21 |
| First published | 2018-06-21 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 196.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 5 |
| Author | Balázs Wermer |
| Maintainers | wermerb |
| Keywords | trumbowyg, Angular, Angular 2, Angular 5, Angular 6, Angular 2 WYSIWYG editor, Angular 5 WYSIWYG editor, Angular 6 WYSIWYG editor |

## Links

- npm: https://www.npmjs.com/package/ngx-trumbowyg
- Repository: https://github.com/wermerb/ngx-trumbowyg
- Homepage: https://github.com/wermerb/ngx-trumbowyg#readme
- Issues: https://github.com/wermerb/ngx-trumbowyg/issues
- npm.io page: https://npm.io/package/ngx-trumbowyg

## Dependencies (1)

- [tslib](https://npm.io/package/tslib.md) ^1.9.0

## Alternatives

- [ext-list](https://npm.io/package/ext-list.md) — 6.3M weekly downloads
- [@lexical/selection](https://npm.io/package/@lexical/selection.md) — 3.8M weekly downloads
- [@lexical/text](https://npm.io/package/@lexical/text.md) — 3.6M weekly downloads
- [@lexical/clipboard](https://npm.io/package/@lexical/clipboard.md) — 3.0M weekly downloads
- [@tiptap/extension-mention](https://npm.io/package/@tiptap/extension-mention.md) — 3.0M weekly downloads

## Recent versions

- 6.0.7 (latest) — 2018-11-21
- 6.0.6 — 2018-10-26
- 6.0.5 — 2018-10-11
- 6.0.4 — 2018-09-20
- 6.0.3 — 2018-09-20
- 6.0.2 — 2018-09-11
- 6.0.1 — 2018-06-21
- 6.0.0 — 2018-06-21
- 0.0.1 — 2018-06-21

## README

# NgxTrumbowyg [![npm version](https://badge.fury.io/js/ngx-trumbowyg.svg)](https://badge.fury.io/js/ngx-trumbowyg)

This an Angular 6 component and a directive wrapper for [Trumbowyg WYSIWYG editor](https://alex-d.github.io/Trumbowyg/).

## Getting started

1.  Run `npm install --save ngx-trumbowyg` or `yarn add ngx-trumbowyg`

2.  Add trumbowyg and jquery to your scripts.

```json
...
"scripts": [
  "./node_modules/jquery/dist/jquery.js",
  "./node_modules/trumbowyg/dist/trumbowyg.min.js"
]
...
```

3.  Import trumbowyg's css: `@import "~trumbowyg/dist/ui/trumbowyg.min.css";`

4.  Copy trumbowyg's icons where ever you want.

    Unix ex: `cp node_modules/trumbowyg/dist/ui/icons.svg src/assets`

    Windows ex: `xcopy /I /E node_modules/trumbowyg/dist/ui/icons.svg src/assetscd`

## Usage

You can import `NgxTrumbowygModule` as many of your modules as you like.

The component and the directive both supports `FormsModule` and `ReactiveFormsModule`.

```html
<form #f="ngForm">
    <ngx-trumbowyg-editor name="editor" [(ngModel)]="model"></ngx-trumbowyg-editor>
    <textarea ngxTrumbowygEditor name="editorDirective" [(ngModel)]="model"></textarea>
</form>
```

```html
<form [formGroup]="form">
    <ngx-trumbowyg-editor formControlName="model"></ngx-trumbowyg-editor>
    <textarea ngxTrumbowygEditor formControlName="model"></textarea>
</form>
```

It also supports common input attributes like:

- disabled
- required
- placeholder

There are two ways to provide configuration:

1.  At module level

```typescript
@NgModule({
    declarations: [...],
    imports: [
        ...
        NgxTrumbowygModule.withConfig({
            lang: 'hu',
            svgPath: '/assets/ui/icons.svg',
            removeformatPasted: true,
            autogrow: true,
            btns: [
                ['formatting'],
                ['strong', 'em', 'del'],
                ['superscript', 'subscript'],
                ['link'],
                ['justifyLeft', 'justifyCenter', 'justifyRight', 'justifyFull'],
                ['unorderedList', 'orderedList'],
                ['horizontalRule'],
                ['removeformat'],
                ['fullscreen']
            ],
            // Some plugins, like emoji, has a prerequisite to run certain functions at certain DOM events.
            // Please keep in mind that some events are protected for the sake of this library.
            // Protected events: tbwinit, tbwchange, tbwfocus
            // You can register events like this:
            events: {
              'input propertychange': () => {
                // Setup emojify.js
                emojify.setConfig({
                    img_dir : '//cdnjs.cloudflare.com/ajax/libs/emojify.js/1.1.0/images/basic/',
                });
                emojify.run();
              }
            }
        })
    ],
    providers: [...],
    bootstrap: [AppComponent]
})
export class AppModule {
}
```

2.  You can pass a `TrumbowygOptions` via `[options]="options"` for both the component or the directive.

Or you can use the combination of the two shown above.

Lets assume you want to configure the `NgxTrumbowygModule` at module level, but at some point you want to create an editor with a different behaviour.

In order to do that all you need to do is to pass an `TrumbowygOptions` via `<ngx-trumbowyg-editor [options]="options"></ngx-trumbowyg-editor>` that will override the global configuration for that particular editor instance.

If you don't want to provide any configuration just import `NgxTrumbowygModule` and the default Trumbowyg's settings will be applied.

---
_Source: https://npm.io/package/ngx-trumbowyg · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._