WYSIWYG editor

Angular Bootstrap 5 WYSIWYG editor plugin

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

Note: Read the API tab to find all available options and advanced customization

Basic example

MDBootstrap

WYSIWYG Editor

Features:

Changing block type
Text formatting (bold, italic, strikethrough, underline)
Setting text color
Setting color highlight
Text aligning
Creating a list (bulled or numbered)
Increase/Decrease indent
Inserting links
Inserting pictures
Insert horizontal line
show HTML code
Undo/Redo

Options:

Translations
Using your own color palette
Disabling/enabling sections

Methods:

Get HTML code from editor

Show code

HTML
Typescript

<mdb-wysiwyg [value]="value"></mdb-wysiwyg>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  value = `
    <br>
    <p style="text-align: center">
      <img src="https://mdbcdn.b-cdn.net/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid">
    </p>
    <h1 style="text-align: center">MDBootstrap</h1>
    <p style="text-align: center">WYSIWYG Editor</p>
    <p style="text-align: center">
      <a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left">MDBootstrap.com</a>&nbsp;© 2020
    </p>
    <p style="text-align: left"><b>Features:</b></p>
    <ul>
      <li>Changing block type</li>
      <li>Text formatting (bold, italic, strikethrough, underline)</li>
      <li>Setting text color</li>
      <li>Setting color highlight</li>
      <li>Text aligning</li>
      <li>Creating a list (bulled or numbered)</li>
      <li>Increase/Decrease indent</li>
      <li>Inserting links</li>
      <li>Inserting pictures</li>
      <li>Insert horizontal line</li>
      <li>show HTML code</li>
      <li>Undo/Redo</li>
    </ul>
    <p><b>Options:</b></p>
    <ul>
      <li>Translations</li>
      <li>Using your own color palette</li>
      <li>Disabling/enabling sections</li>
    </ul>
    <p><b>Methods:</b></p>
    <ul>
      <li>Get HTML code from editor</li>
    </ul>
  `;
}

Translations

MDBootstrap WYSIWYG Editor comes with the option that allows you to use custom translations for all text in the editor.

MDBootstrap

WYSIWYG Editor

Show code

HTML
Typescript

<mdb-wysiwyg [value]="value" [options]="translation"></mdb-wysiwyg>

import { Component } from '@angular/core';
import { MdbWysiwygOptions } from 'projects/mdb-angular-wysiwyg';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  value = `
    <br />
    <p style="text-align: center">
      <img
        src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
        class="img-fluid"
      />
    </p>
    <h1 style="text-align: center">MDBootstrap</h1>
    <p style="text-align: center">WYSIWYG Editor</p>
    <p style="text-align: center">
      <a
        href="https://mdbootstrap.com"
        target="_blank"
        contenteditable="false"
        style="font-size: 1rem; text-align: left"
        >MDBootstrap.com</a
      >&nbsp;© 2020
    </p>
  `;

  translation: MdbWysiwygOptions = {
    paragraph: 'Paragraf',
    textStyle: 'Styl tekstu',
    heading: 'Nagłówek',
    preformatted: 'Pre-formatowany',
    bold: 'Pogrubienie',
    italic: 'Kursywa',
    strikethrough: 'Przekreślenie',
    underline: 'Podkreślenie',
    textcolor: 'Kolor tekstu',
    textBackgroundColor: 'kolor zaznaczenia',
    justifyLeft: 'Wyśrodkowanie do lewej',
    justifyCenter: 'Wyśrodkowanie do środka',
    justifyRight: 'Wyśrodkowane do prawej',
    justifyFull: 'Justowanie',
    insertLink: 'Wstaw link',
    insertPicture: 'Wstaw obraz',
    insertUnorderedList: 'Lista punktowa',
    insertOrderedList: 'Lista numerowana',
    indent: 'Zwiększ wcięcie',
    outdent: 'Zmniejsz wcięcie',
    insertHorizontalRule: 'Wstaw linię poziomą',
    showHTML: 'Pokaż kod HTML',
    undo: 'Cofnij',
    redo: 'Przywróć',
    addLinkHead: 'Dodaj Link',
    addImageHead: 'Dodaj Obraz',
    linkUrlLabel: 'Wpisz adres:',
    linkDescription: 'Wpisz opis',
    imageUrlLabel: 'Wpisz adres obrazka:',
    okButton: 'OK',
    cancelButton: 'Anuluj',
    moreOptions: 'Pokaż więcej opcji',
  };
}

Custom colors

By default, MDBootstrap 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.

MDBootstrap

WYSIWYG Editor

Default Colors:

#1266F1 - Primary
#B23CFD - Secondary
#00B74A - Success
#F93154 - Danger
#FFA900 - Warning
#39C0ED - Info
#FBFBFB - Light
#262626 - Dark

Show code

HTML
Typescript

<mdb-wysiwyg [value]="value" [colors]="colors"></mdb-wysiwyg>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  value = `
    <br />
    <p style="text-align: center">
      <img
        src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
        class="img-fluid"
      />
    </p>
    <h1 style="text-align: center">MDBootstrap</h1>
    <p style="text-align: center">WYSIWYG Editor</p>
    <p style="text-align: center">
      <a
        href="https://mdbootstrap.com"
        target="_blank"
        contenteditable="false"
        style="font-size: 1rem; text-align: left"
        >MDBootstrap.com</a
      >&nbsp;© 2020
    </p>
    <p style="text-align: left"><b>Default Colors:</b></p>
    <ul>
      <li><span style="color: #1266f1">#1266F1 - Primary</span></li>
      <li><span style="color: #b23cfd">#B23CFD - Secondary</span></li>
      <li><span style="color: #00b74a">#00B74A - Success</span></li>
      <li><span style="color: #f93154">#F93154 - Danger</span></li>
      <li><span style="color: #ffa900">#FFA900 - Warning</span></li>
      <li><span style="color: #39c0ed">#39C0ED - Info</span></li>
      <li>
        <span style="color: #fbfbfb; background-color: rgb(38, 38, 38)">#FBFBFB - Light</span>
      </li>
      <li><span style="color: #262626">#262626 - Dark</span></li>
    </ul>
  `;

  colors = ['#3949AB', '#00BCD4', '#7CB342'];
}

Disable toolbar section

You can disable any section. The full list of sections can be found in the API tab.

MDBootstrap

WYSIWYG Editor

Show code

HTML
Typescript

<mdb-wysiwyg [value]="value" [toolbarOptions]="disableToolbarOptions"></mdb-wysiwyg>

import { Component } from '@angular/core';
import { MdbWysiwygToolbarOptions } from 'mdb-angular-wysiwyg';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  value = `
    <br />
    <p style="text-align: center">
      <img
        src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
        class="img-fluid"
      />
    </p>
    <h1 style="text-align: center">MDBootstrap</h1>
    <p style="text-align: center">WYSIWYG Editor</p>
    <p style="text-align: center">
      <a
        href="https://mdbootstrap.com"
        target="_blank"
        contenteditable="false"
        style="font-size: 1rem; text-align: left"
        >MDBootstrap.com</a
      >&nbsp;© 2020
    </p>
  `;

  disableToolbarOptions: MdbWysiwygToolbarOptions = {
    formatting: {
      hidden: true,
    },
    align: {
      hidden: true,
    },
    lists: {
      disabled: false,
      hidden: false,
      insertUnorderedList: { hidden: true },
      indent: { disabled: true },
    },
    showCode: { disabled: true },
  };
}

Fixed toolbar

You can set [fixed]="true" to pin the toolbar to the top of the screen. This option will be useful when there is a lot of text.

MDBootstrap

WYSIWYG Editor

Show code

HTML
Typescript

<mdb-wysiwyg [fixed]="true" [value]="value"></mdb-wysiwyg>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  value = `
    <br />
    <p style="text-align: center">
      <img
        src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
        class="img-fluid"
      />
    </p>
    <h1 style="text-align: center">MDBootstrap</h1>
    <p style="text-align: center">WYSIWYG Editor</p>
    <p style="text-align: center">
      <a
        href="https://mdbootstrap.com"
        target="_blank"
        contenteditable="false"
        style="font-size: 1rem; text-align: left"
        >MDBootstrap.com</a
      >&nbsp;© 2020
    </p>
  `;
}

Fixed toolbar offset

Use the [fixedOffsetTop]="80" option to set the distance from the top of the screen. This helps to avoid hiding the toolbar behind the navigation bar or other element on the page.

MDBootstrap

WYSIWYG Editor

Show code

HTML
Typescript

<mdb-wysiwyg [value]="value" [fixed]="true" [fixedOffsetTop]="80"></mdb-wysiwyg>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  value = `
    <br />
    <p style="text-align: center">
      <img
        src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
        class="img-fluid"
      />
    </p>
    <h1 style="text-align: center">MDBootstrap</h1>
    <p style="text-align: center">WYSIWYG Editor</p>
    <p style="text-align: center">
      <a
        href="https://mdbootstrap.com"
        target="_blank"
        contenteditable="false"
        style="font-size: 1rem; text-align: left"
        >MDBootstrap.com</a
      >&nbsp;© 2020
    </p>
  `;
}

Template driven forms

You can use ngModel to set default value

MDBootstrap

WYSIWYG Editor

Show code

HTML
Typescript

<mdb-wysiwyg [(ngModel)]="value"></mdb-wysiwyg>

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  value = `
    <br />
    <p style="text-align: center">
      <img
        src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp"
        class="img-fluid"
      />
    </p>
    <h1 style="text-align: center">MDBootstrap</h1>
    <p style="text-align: center">WYSIWYG Editor</p>
    <p style="text-align: center">
      <a
        href="https://mdbootstrap.com"
        target="_blank"
        contenteditable="false"
        style="font-size: 1rem; text-align: left"
        >MDBootstrap.com</a
      >&nbsp;© 2020
    </p>
  `;
}

WYSIWYG editor - API

Installation

To install and configure the plugin follow our Plugins Installation Guide. Please remember to update all the plugin names and import paths. You can find all the necessary information in the Import section.

Terminal

npm i git+https://oauth2:ACCESS_TOKEN@git.mdbootstrap.com/mdb/angular/mdb5/plugins/prd/wysiwyg

Import

Show code

app.module.ts

import { MdbWysiwygModule } from 'mdb-angular-wysiwyg';
import { FormsModule } from '@angular/forms';
…
@NgModule ({
  ...
  imports: [MdbWysiwygModule, FormsModule],
  ...
})

styles.scss

@import 'mdb-angular-wysiwyg/scss/wysiwyg.scss';

Inputs

Name	Type	Default	Description
`colors`	Array		Defines custom color palette
`fixed`	Boolean	`false`	Set true to scrolls toolbar with the page until it reaches the top, then stays there
`fixedOffsetTop`	Number	`0`	Set the distance in pixels from the top edge of the browser

Methods

Name	Description	Example
`getCode`	Get code in HTML format	`wysiwyg.getCode()`

Show code

HTML
Typescript

<mdb-wysiwyg #wysiwyg [value]="value"></mdb-wysiwyg>
<button class="btn btn-primary" (click)="getValue()">get value</button>

import { Component, ViewChild } from '@angular/core';
import { MdbWysiwygComponent } from 'mdb-angular-wysiwyg';

@Component({
  selector: 'app-root',
  templateUrl: './app.component.html',
})
export class AppComponent {
  @ViewChild('wysiwyg') wysiwyg!: MdbWysiwygComponent;

  getValue() {
    console.log(this.wysiwyg.getCode());
  }
}

Advanced types

MdbWysiwygOptions

Name	Type	Default	Description
`paragraph`	string	`'Paragraph'`	Defines paragraph tooltip displayed text.
`textStyle`	string	`'Text style'`	Defines text style tooltip displayed text.
`heading`	string	`'Heading'`	Defines heading tooltip displayed text.
`preformatted`	string	`'Preformatted'`	Defines preformatted tooltip displayed text.
`bold`	string	`'Bold'`	Defines bold tooltip displayed text.
`italic`	string	`'Italic'`	Defines italic tooltip displayed text.
`strikethrough`	string	`'Strikethrough'`	Defines strikethrough tooltip displayed text.
`underline`	string	`'Underlinet'`	Defines underline tooltip displayed text.
`textcolor`	string	`'Color'`	Defines textcolor tooltip displayed text.
`textBackgroundColor`	string	`'Background Color'`	Defines text background color tooltip displayed text.
`justifyLeft`	string	`'Align Left'`	Defines align left tooltip displayed text.
`justifyCenter`	string	`'Align Center'`	Defines align center tooltip displayed text.
`justifyRight`	string	`'Align Right'`	Defines align right tooltip displayed text.
`justifyFull`	string	`'Align Justify'`	Defines align justify tooltip displayed text.
`insertLink`	string	`'Insert Link'`	Defines insert link tooltip displayed text.
`insertPicture`	string	`''Insert Picture''`	Defines insert picture tooltip displayed text.
`insertUnorderedList`	string	`'Unordered List'`	Defines unordered list tooltip displayed text.
`insertOrderedList`	string	`'Numbered List'`	Defines numbered list tooltip displayed text.
`indent`	string	`'Increase Indent'`	Defines indent tooltip displayed text.
`outdent`	string	`'Decrease Indent'`	Defines outdent tooltip displayed text.
`insertHorizontalRule`	string	`'Insert Horizontal Line'`	Defines insert horizontal line tooltip displayed text.
`showHTML`	string	`'Show HTML code'`	Defines show HTML code tooltip displayed text.
`undo`	string	`'Undo'`	Defines undo tooltip displayed text.
`redo`	string	`'Redo'`	Defines redo tooltip displayed text.
`addLinkHead`	string	`'Add Link'`	Defines add link modal title text.
`addImageHead`	string	`'Increase Image'`	Defines add image modal title text.
`linkUrlLabel`	string	`'Enter a URL:'`	Defines link URL input label text.
`linkDescription`	string	`'Enter a description'`	Defines link description input label text.
`imageUrlLabel`	string	`'Enter a URL:'`	Defines image URL input label text.
`okButton`	string	`'OK'`	Defines modal confirm button text.
`cancelButton`	string	`'cancel'`	Defines modal cancel button text.
`indent`	string	`'Increase Indent'`	Defines indent tooltip displayed text.
`moreOptions`	string	`'Show More Options'`	Defines show more options tooltip displayed text.

MdbWysiwygToolbarOptions

Note: Due to its complexity, we present this advanced type in the form of a snippet rather than a table.

Show code

export interface MdbWysiwygToolbarOptions {
  styles?: {
    disabled?: boolean;
    hidden?: boolean;
    p?: { disabled?: boolean; hidden?: boolean };
    h1?: { disabled?: boolean; hidden?: boolean };
    h2?: { disabled?: boolean; hidden?: boolean };
    h3?: { disabled?: boolean; hidden?: boolean };
    h4?: { disabled?: boolean; hidden?: boolean };
    h5?: { disabled?: boolean; hidden?: boolean };
    h6?: { disabled?: boolean; hidden?: boolean };
    pre?: { disabled?: boolean; hidden?: boolean };
  };
  formatting?: {
    disabled?: boolean;
    hidden?: boolean;
    bold?: { disabled?: boolean; hidden?: boolean };
    italic?: { disabled?: boolean; hidden?: boolean };
    underline?: { disabled?: boolean; hidden?: boolean };
    strikethrough?: { disabled?: boolean; hidden?: boolean };
    textColor?: { disabled?: boolean; hidden?: boolean };
    textBackground?: { disabled?: boolean; hidden?: boolean };
  };
  align?: {
    disabled?: boolean;
    hidden?: boolean;
    justifyLeft?: { disabled?: boolean; hidden?: boolean };
    justifyCenter?: { disabled?: boolean; hidden?: boolean };
    justifyRight?: { disabled?: boolean; hidden?: boolean };
    justifyFull?: { disabled?: boolean; hidden?: boolean };
  };
  lists?: {
    disabled?: boolean;
    hidden?: boolean;
    insertUnorderedList?: { disabled?: boolean; hidden?: boolean };
    insertOrderedList?: { disabled?: boolean; hidden?: boolean };
    indent?: { disabled?: boolean; hidden?: boolean };
    outdent?: { disabled?: boolean; hidden?: boolean };
  };
  links?: {
    disabled?: boolean;
    hidden?: boolean;
    link?: { disabled?: boolean; hidden?: boolean };
    image?: { disabled?: boolean; hidden?: boolean };
    insertHorizontalRule?: { disabled?: boolean; hidden?: boolean };
  };
  showCode?: { disabled?: boolean; hidden?: boolean };
  undoRedo?: {
    disabled?: boolean;
    hidden?: boolean;
    undo?: { disabled?: boolean; hidden?: boolean };
    redo?: { disabled?: boolean; hidden?: boolean };
  };
}

WYSIWYG editor

Angular Bootstrap 5 WYSIWYG editor plugin

Basic example

Add Link

Add Image

Add Link

Add Image

MDBootstrap

Translations

Dodaj Link

Dodaj Obraz

Dodaj Link

Dodaj Obraz

MDBootstrap

Custom colors

Add Link

Add Image

Add Link

Add Image

MDBootstrap

Disable toolbar section

Add Link

Add Image

Add Link

Add Image

MDBootstrap

Fixed toolbar

Add Link

Add Image

Add Link

Add Image

MDBootstrap

Fixed toolbar offset

Add Link

Add Image

Add Link

Add Image

MDBootstrap

Template driven forms

Add Link

Add Image

Add Link

Add Image

MDBootstrap

Related resources

WYSIWYG editor - API

Installation

Import

Inputs

Methods

Advanced types

MdbWysiwygOptions

MdbWysiwygToolbarOptions