Angular Bootstrap WYSIWYG Editor

Angular WYSIWYG Editor Plugin - Bootstrap 4 & Material Design

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a 50% discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
get 50% discount on MDB5 PRO

The Angular Bootstrap WYSIWYG Editor is a lightweight plugin that enables rich text editing on your website.

To start working with the WYSIWYG editor plugin see "Getting Started" tab on this page.

Basic Example 

        
            
          <mdb-wysiwyg></mdb-wysiwyg>

Translations

The Angular Bootstrap WYSIWYG Editor comes with an option that allows you to use custom translations for all text in the editor.

        
            
          <mdb-wysiwyg [options]="options"></mdb-wysiwyg>
        
        
    
        
            
          import {Component} from '@angular/core';

          @Component({
            selector: 'wysiwyg-translate',
            templateUrl: './wysiwyg-translate.component.html',
            styleUrls: ['./wysiwyg-translate.component.scss']
          })
          export class WysiwygTranslateComponent {
            options = {
              translations: {
                textElements: {
                  paragraph: 'Paragraf',
                  heading: 'Nagłówek',
                  preformatted: 'Pre-formatowany',
                },
                textStyle: {
                  bold: 'Pogrubione',
                  italic: 'Italiczne',
                  strikethrough: 'Przekreślone',
                  underline: 'Podkreślone',
                  color: 'Kolor',
                },
                textAlign: {
                  justifyLeft: 'Lewy',
                  justifyCenter: 'Środek',
                  justifyRight: 'Prawy',
                  justifyFull: 'Justowanie',
                },
                imageAndLink: {
                  createLink: 'Wstaw Link',
                  insertImage: 'Wstaw zdjęcie',
                  linkURLPlaceholder: 'Podaj adres',
                  imageURLPlaceholder: 'Podaj adres obrazka',
                },
                lists: {
                  insertUnorderedList: 'Lista wypunktowana',
                  insertOrderedList: 'Lista numerowana',
                },
                showHTML: 'Pokaż HTML',
              }
            }
          }

Custom color palette

By default, Angular Bootstrap's WYSIWYG Editor uses the color palette from MDBootstrap's text colors. If you need to use your custom colors, you can simply customize them to fit your project.

        
            
          <mdb-wysiwyg [options]="options"></mdb-wysiwyg>
        
        
    
        
            
          import {Component} from '@angular/core';

          @Component({
            selector: 'wysiwyg-colors',
            templateUrl: './wysiwyg-colors.component.html',
            styleUrls: ['./wysiwyg-colors.component.scss']
          })
          export class WysiwygColorsComponent {
            options = {
              colors: {
                red: '#d50000',
                green: '#64dd17',
                yellow: '#fff176',
                blue: '#03a9f4',
                purple: '#6a1b9a',
                white: '#fff',
                black: '#000'
              }
            }
          }

Custom color palette

There are two ways to get the latest WYSIWYG value. You can use (valueChange) event, or you can subscribe to the valueChange$ observable.

        
            
          <mdb-wysiwyg #wysiwyg (valueChange)="onValueChange($event)"></mdb-wysiwyg>
        
        
    
        
            
          import {Component, AfterViewInit, ViewChild} from '@angular/core';
          import {MdbWysiwygComponent} from 'mdb-wysiwyg';

          @Component({
            selector: 'wysiwyg-events',
            templateUrl: './wysiwyg-events.component.html',
            styleUrls: ['./wysiwyg-events.component.scss']
          })
          export class WysiwygEventsComponent {
            @ViewChild(MdbWysiwygComponent, { static: true }) wysiwyg!: MdbWysiwygComponent;

            ngAfterViewInit() {
              this.wysiwyg.valueChange$.subscribe((data: any) => {
              console.log(data);
              });
            }

            onValueChange(value: string) {
              console.log(value);
            }
          }

Installation guide

Step 1: Create a new Angular application using Angular CLI command:

ng new application-name --style=scss --routing=false

Step 2: Download this plugin from your user dashboard

Step 3: Extract the downloaded archive from Step 2 and copy the mdb-wysiwyg-{version-number}.tgz file to your application root directory

Step 4: Install the mdb-wysiwyg-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-wysiwyg-{version-number.tgz} --save

For example, the installation command should look like the following: npm install mdb-wysiwyg-8.0.0.tgz --save

Step 5: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 6: Import the MdbWysiwygModule into the app.module.ts file

Step 7: Copy the basic example from this site and enjoy your new plugin!

Step 1: Download this plugin from your user dashboard

Step 2: Extract the downloaded archive from Step 1 and copy mdb-wysiwyg-{version-number}.tgz file to your application root directory

Step 3: Install the mdb-wysiwyg-{version-number}.tgz package in your application by executing the below command in the application's terminal:

npm install mdb-wysiwyg-{version-number.tgz} --save

For example, the installation command should look like following: npm install mdb-wysiwyg-8.0.0.tgz --save

Step 4: Follow the Quickstart Guide to add MDB Angular Free or MDB Angular Pro (depending on which version you're using) to the application

Step 5: Import the MdbWysiwygModule in the app.module.ts file

Step 6: Copy the basic example from this site and enjoy your new plugin!

Angular WYSIWYG Editor - API

Download

This plugin requires a purchase.

Buy WYSIWYG Editor plugin

Modules used

In order to speed up your application, you can choose to import only the modules you actually need, instead of importing the entire MDB Angular library. Remember that importing the entire library, and immediately afterwards a specific module, is bad practice, and can cause application errors. 

        
            
          import { MdbWysiwygModule } from 'mdb-wysiwyg';
Import example Modules list

Options

Name Type Description
tooltips boolean Shows Angular Bootstrap Tooltips for the toolbar buttons.
colors Object Allows the use of custom color palette. See details here.
translations Object Allows the overwriting of default plugin translations. See details here.

Outputs

Name Type Description Example
valueChange EventEmitter<string> Event fired when a value was changed. (valueChange)="onValueChange($event)"

Fields

Name Type Default Description Example
valueChange$ Observable<string> - Observable field to which you can subscribe to get the latest value from the WYSIWYG editor. this.wysiwyg.valueChange$.subscribe(value => console.log(value));