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

Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.

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 Edit in sandbox

HTML

        
            
        <div class="wysiwyg" data-mdb-wysiwyg-init>
          <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>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>
        </div>

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 Edit in sandbox

HTML
JavaScript

        
            
        <div class="wysiwyg">
          <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>Features:</b></p>
        </div>

        
            
        var wysiwygElement = document.getElementsByClassName('wysiwyg')[0];
        var wysiwygInstance = new WYSIWYG(wysiwygElement, {
          wysiwygTranslations: {
            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',
            alignLeft: 'Wyśrodkowanie do lewej',
            alignCenter: 'Wyśrodkowanie do środka',
            alignRight: 'Wyśrodkowane do prawej',
            alignJustify: 'Justowanie',
            insertLink: 'Wstaw link',
            insertPicture: 'Wstaw obraz',
            unorderedList: 'Lista punktowa',
            orderedList: 'Lista numerowana',
            increaseIndent: 'Zwiększ wcięcie',
            decreaseIndent: '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 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 Edit in sandbox

HTML
JavaScript

        
            
        <div class="wysiwyg">
          <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>
        </div>

        
            
        var wysiwygElement = document.getElementsByClassName('wysiwyg')[0];
        var wysiwygInstance = new WYSIWYG(wysiwygElement, {
          wysiwygColors : [
            '#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 Edit in sandbox

HTML

        
            
        <div class="wysiwyg" data-mdb-wysiwyg-init data-mdb-wysiwyg-formatting-section="false" data-mdb-wysiwyg-justify-section="false">
          <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>Features:</b></p>
        </div>

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

Show code Edit in sandbox

HTML

        
            
        <div class="wysiwyg" data-mdb-wysiwyg-init data-mdb-wysiwyg-fixed="true">
          <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>
        </div>

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

Show code Edit in sandbox

HTML

        
            
        <div class="wysiwyg" data-mdb-wysiwyg-init data-mdb-wysiwyg-fixed="true" data-mdb-wysiwyg-fixed-offset-top="80">
          <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>
        </div>

WYSIWYG editor - API

Import

Show code Edit in sandbox

JavaScript
SCSS

        
            
          import WYSIWYG from 'mdb-wysiwyg-editor';

        
            
          @import '~mdb-wysiwyg-editor/css/wysiwyg.min.css';

Usage

Via data attributes

Using the WYSIWYG editor plugin doesn't require any additional JavaScript code - simply add data-mdb-wysiwyg-init attribute to .wysiwyg and use other data attributes to set all options.

Show code Edit in sandbox

HTML

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

Via JavaScript

Show code Edit in sandbox

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.

Show code Edit in sandbox

jQuery

        
            
        $(document).ready(() => { 
          $('.wysiwyg').wysiwyg();
        });

Options

Options can be passed via data attributes or JavaScript. For data attributes, append the option name to data-mdb-, as in data-mdb-wysiwyg-colors="".

Name	Type	Default	Description
`wysiwygColors`	Array		Defines custom color palette
`wysiwygTranslations`	Array		Defines custom texts
`wysiwygstylesSection`	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
`wysiwygTextareaName`	String		Set the a custom `name` for wysywig textarea

Methods

Name	Parameters	Description	Example
`dispose`	-	Removes wysywig instance.	`instance.dispose()`
`getInstance`	element	Static method which allows you to get the wysywig instance associated to a DOM element.	`WYSIWYG.getInstance(wysiwygElement)`
`getCode`		Get code in HTML format.	`instance.getCode()`

Show code Edit in sandbox

JavaScript

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

WYSIWYG editor

Bootstrap 5 WYSIWYG editor plugin

Basic example

MDBootstrap

Translations

MDBootstrap

Custom colors

MDBootstrap

Disable toolbar section

MDBootstrap

Fixed toolbar

MDBootstrap

Fixed toolbar offset

MDBootstrap

Related resources

WYSIWYG editor - API

Import

Usage

Via data attributes

Via JavaScript

Via jQuery

Options

Methods