This package has been deprecated

Author message:

Package has been renamed please use ngx-trumbowyg

trumbowyg-ngx
TypeScript icon, indicating that this package has built-in type declarations

1.1.4 • Public • Published

TrumbowygNgx npm version bitHound Code

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

Getting started

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

  2. Add trumbowyg and jquery to your scripts.

...
"scripts"[
        "../node_modules/jquery/dist/jquery.js",
        "../node_modules/trumbowyg/dist/trumbowyg.min.js"
      ]
...
  1. Import trumbowyg's css: @import "~trumbowyg/dist/ui/trumbowyg.min.css";

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

<form #f="ngForm">
    <trumbowyg-ngx-editor name="editor" [(ngModel)]="model"></trumbowyg-ngx-editor>
    <textarea trumbowygNgxEditor name="editorDirective" [(ngModel)]="model"></textarea>
</form>
<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
@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 {
}
  1. 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.

Dependencies (3)

Dev Dependencies (30)

Package Sidebar

Install

npm i trumbowyg-ngx

Weekly Downloads

89

Version

1.1.4

License

MIT

Unpacked Size

91.7 kB

Total Files

23

Last publish

Collaborators

  • wermerb