WYSIWYG Editor

Bootstrap WYSIWYG Editor plugin

Note: We are transitioning MDB4 to a legacy version and focusing on developing MDB5. While we'll continue to support for the transition period, we encourage you to migrate to MDB5. We're offering a huge discount on MDB5 PRO to help with your transition, enabling you to leverage the full potential of the latest version. You can find more information here.
upgrade with discount

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

<img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp" class="img-fluid">
 <h1 style="text-align: center;">MDBootstrap</h1>
 WYSIWYG Editor
 <a href="https://mdbootstrap.com" target="_blank" contenteditable="false" style="font-size: 1rem; text-align: left;">MDBootstrap.com</a> © 2020
 Features:
 
 <ul>
 <li>Changing block type</li>
 <li>Text formatting (bold, italic, strikethrough, underline)</li>
 <li>Setting text color</li>
 <li>Text aligning</li>
 <li>Inserting links</li>
 <li>Inserting pictures</li>
 <li>Creating a list (bulled or numbered)</li>
 </ul>
 Options:
 <ul>
 <li>Translations</li>
 <li>Using your own color palette</li>
 <li>Disabling/enabling tooltips</li>
 </ul>

Show code Edit in sandbox

HTML

        
            

        <textarea id="demo">
          <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>
          <p style="text-align: left;">
              <ul>
                  <li>Changing block type</li>
                  <li>Text formatting (bold, italic, strikethrough, underline)</li>
                  <li>Setting text color</li>
                  <li>Text aligning</li>
                  <li>Inserting links</li>
                  <li>Inserting pictures</li>
                  <li>Creating a list (bulled or numbered)</li>
              </ul>
              <p><b>Options:</b></p>
              <ul>
                  <li>Translations</li>
                  <li>Using your own color palette</li>
                  <li>Disabling/enabling tooltips</li>
              </ul>
          </p>
        </textarea>

        
            

        $("#demo").mdbWYSIWYG();

Translations

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

Show code Edit in sandbox

HTML

        
            

        <textarea id="demoTranslations">
          <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>
        </textarea>

        
            

        $("#demoTranslations").mdbWYSIWYG({

        });

Custom color palette

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

Show code Edit in sandbox

HTML

        
            

        <textarea id="demoCustomPalette">
          <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>
        </textarea>

        
            

        $("#demoCustomPalette").mdbWYSIWYG({
          colorPalette: {
            red: '#d50000',
            green: '#64dd17',
            yellow: '#fff176',
            blue: '#03a9f4',
            purple: '#6a1b9a',
            white: '#fff',
            black: '#000'
          }
        });

Options

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

MDB WYSIWYG Editor - getting started : download & setup

Download

This plugin requires a purchase.
Buy WYSIWYG Editor plugin

Installation tutorial

Note: The video below shows a different plugin, but it does not matter. The installation process is the same for all plugins.

Introduction
Download