# trumbowyg-ngx

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

Latest version **1.1.4** (published 2018-06-21) · MIT license · 0 weekly downloads

> **Deprecated.** This package is deprecated.

## Install

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

## Health

**Score 10/100 (F)** — status: deprecated.

Negative: deprecated.

## Facts

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

## Links

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

## Dependencies (3)

- [tslib](https://npm.io/package/tslib.md) ^1.7.1
- [jquery](https://npm.io/package/jquery.md) ^3.2.1
- [trumbowyg](https://npm.io/package/trumbowyg.md) ^2.10.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

- 1.1.4 (latest) — 2018-06-21
- 1.1.3 — 2018-06-16
- 1.1.2 — 2018-06-13
- 1.1.1 — 2018-06-13
- 1.1.0 — 2018-04-14
- 1.0.9 — 2018-04-14
- 1.0.8 — 2018-03-23
- 1.0.7 — 2017-12-25
- 1.0.6 — 2017-12-25
- 1.0.4 — 2017-12-09
- 1.0.3 — 2017-11-19
- 1.0.2 — 2017-11-10
- 1.0.1 — 2017-11-10
- 1.0.0 — 2017-11-09

## README

# TrumbowygNgx [![npm version](https://badge.fury.io/js/trumbowyg-ngx.svg)](https://badge.fury.io/js/trumbowyg-ngx) [![bitHound Code](https://www.bithound.io/github/wermerb/trumbowyg-ngx/badges/code.svg)](https://www.bithound.io/github/wermerb/trumbowyg-ngx)

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

## Getting started

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

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 `TrumbowygNgxModule` as many of your modules as you like.

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

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

```html
<form [formGroup]="form">
    <trumbowyg-ngx-editor formControlName="model"></trumbowyg-ngx-editor>
    <textarea trumbowygNgxEditor 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: [
        ...
        TrumbowygNgxModule.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']
            ]
        })
    ],
    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 `TrumbowygNgxModule` 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 `<trumbowyg-ngx-editor [options]="options"></trumbowyg-ngx-editor>` that will override the global configuration for that particular editor instance.

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

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