Rate these docs

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.


Basic Example



        <textarea id="demo">
          <br/>
          <p style="text-align: center;"><img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" 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;© 2018</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.



        <textarea id="demoTranslations">
          <p style="text-align: center;"><img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" 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;© 2018</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.



        <textarea id="demoCustomPalette">
          <p style="text-align: center;"><img src="https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.png" 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;© 2018</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.

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

MDB WYSIWYG Editor - getting started : download & setup


Download

This plugin requires a purchase.

Buy WYSIWYG Editor plugin - $9

Installation tutorial

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