Edit these docs Rate these docs

Angular Bootstrap WYSIWYG Editor

Angular WYSIWYG Editor plugin - Bootstrap 4 & Material Design

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

To start working with sortable plugin see "Getting Started" tab on this page.

Basic Example




Angular Bootstrap WYSIWYG Editor comes with the 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';

          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 WYSIWYG Editor use 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';

          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's 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';

          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) => {

          onValueChange(value: string) {


Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

MDB WYSIWYG Editor - getting started : download & setup


This plugin requires a purchase.

Buy WYSIWYG Editor plugin - $9

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'


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


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


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