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

MDBootstrap.com © 2020

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

Translations

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


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020


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

MDBootstrap.com © 2020

Default Colors:

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

Disable toolbar section

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


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020


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

MDBootstrap.com © 2020


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

MDBootstrap.com © 2020


Template driven forms

You can use ngModel to set default value


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020


WYSIWYG editor - API


Import


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

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

Options

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.

Methods

Name Parameters Description
getCode - Get code in HTML format

        <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());
          }
        }