Notorious Penguin Magicians

    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.

    Install

    npm i trumbowyg-ngx

    DownloadsWeekly Downloads

    140

    Version

    1.1.4

    License

    MIT

    Unpacked Size

    91.7 kB

    Total Files

    23

    Last publish

    Collaborators

    • wermerb