NgxTrumbowyg

This an Angular 6 component and a directive wrapper for Trumbowyg WYSIWYG editor.

Getting started

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

2. Add trumbowyg and jquery to your scripts.

...
"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.

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

<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

@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.