WYSIWYG Editor

Bootstrap WYSIWYG Editor plugin

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.

Note: This documentation is for an older version of Bootstrap (v.4). A newer version is available for Bootstrap 5. We recommend migrating to the latest version of our product - Material Design for Bootstrap 5.
Go to docs v.5

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