Vue WYSIWYG Editor

Vue Bootstrap WYSIWYG Editor plugin

Vue Bootstrap WYSIWYG Editor is a lightweight plugin that enables rich text editing on your website.

Basic Example 



        <mdb-wysiwyg>
          <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>
          <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>
        </mdb-wysiwyg>

      


        import mdbWysiwyg from 'mdb-wysiwyg'

        export default {
          name: 'app',
          components: {
            mdbWysiwyg
          }
        }

Translations

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



        <mdb-wysiwyg :translations="{
          paragraph: 'Paragraph',
          heading: 'Heading',
          preformatted: 'Preformatted',
          bold: 'Bold',
          italic: 'Italic',
          strikethrough: 'Strikethrough',
          underline: 'Underline',
          textcolor: 'Color',
          alignleft: 'Align Left',
          aligncenter: 'Align Center',
          alignright: 'Align Right',
          alignjustify: 'Align Justify',
          insertlink: 'Insert Link',
          insertpicture: 'Insert Picture',
          bulletlist: 'Ordered List',
          numberedlist: 'Numbered List',
          enterurl: 'Enter the URL',
          imageurl: 'Image URL',
          changeview: 'Change view'
        }">
          <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>
        </mdb-wysiwyg>

      


        import mdbWysiwyg from 'mdb-wysiwyg'

        export default {
          name: 'app',
          components: {
            mdbWysiwyg
          }
        }

Custom color palette

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



        <mdb-wysiwyg :colors="['#EA3C3B', '#E00065', #FFFFFF', '#000000']">
          <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>
        </mdb-wysiwyg>

      


        import mdbWysiwyg from 'mdb-wysiwyg'

        export default {
          name: 'app',
          components: {
            mdbWysiwyg
          }
        }

MDB Vue WYSIWYG Editor - API

Download

This plugin requires a purchase.

Buy Vue WYSIWYG Editor plugin - $9

Options

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