Rate this 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.

MDB WYSIWYG Editor - getting started : download & setup


Download

This plugin requires a purchase.

Buy WYSIWYG Editor plugin - $9

Tutorial