WYSIWYG editor

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 data-mdb-wysiwyg-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 data-mdb-wysiwyg-fixed-offset-top 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

WYSIWYG editor - API

Usage

Via data attributes


        <div class="wysiwyg" data-mdb-wysiwyg="wysiwyg"></div>

Via JavaScript


        const wysiwygElement = document.getElementsByClassName('wysiwyg')[0];
        const wysiwygInstance = WYSIWYG.getInstance(wysiwygElement);

Via jQuery

Note: By default, MDB does not include jQuery and you have to add it to the project on your own. 


        $('.wysiwyg').wysiwyg();

Options

Options can be passed via data attributes, JavaScript, or jQuery. For data attributes, append the option name to data-mdb-, as in data-mdb-styles-section="false".

Name Type Default Description
wysiwygColors Array Defines custom color palette
wysiwygTranslations Array Defines custom texts
wysiwygStyleSection Boolean true Set to false to disable the styles section
wysiwygFormattingSection Boolean true Set to false to disable the formatting section
wysiwygJustifySection Boolean true Set to false to disable the justify section
wysiwygListsSection Boolean true Set to false to disable the lists section
wysiwygLinksSection Boolean true Set to false to disable the links section
wysiwygShowCodeSection Boolean true Set to false to disable the show code section
wysiwygUndoRedoSection Boolean true Set to false to disable the undo-redo section
wysiwygFixed Boolean false Set true to scrolls toolbar with the page until it reaches the top, then stays there
wysiwygFixedOffsetTop Number 0 Set the distance in pixels from the top edge of the browser

Methods

Name Parameters Description Example
getCode Get code in HTML format instance.open(1) 

        const wysiwygElement = document.getElementsByClassName('wysiwyg')[0];
        const wysiwygInstance = WYSIWYG.getInstance(wysiwygElement);
        instance.getCode();

Import

MDB UI KIT also works with module bundlers. Use the following code to import this component: 


        import WYSIWYG from 'mdb-wysiwyg';