Vue WYSIWYG Editor

Vue Bootstrap WYSIWYG Editor plugin

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

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

Basic Example

MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2018

Features:

  • Changing block type
  • Text formatting (bold, italic, strikethrough, underline)
  • Setting text color
  • Text aligning
  • Inserting links
  • Inserting pictures
  • Creating a list (bulled or numbered)

Options:

  • Translations
  • Using your own color palette
  • Disabling/enabling tooltips
<template>
  <mdb-wysiwyg>
    <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>
    <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>
</template>
<script>
  import mdbWysiwyg from 'mdb-wysiwyg'
  export default {
    name: 'app',
    components: {
      mdbWysiwyg
    }
  }
</script>

Translations

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

MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2018

<template>
  <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.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>
  </mdb-wysiwyg>
</template>
<script>
  import mdbWysiwyg from 'mdb-wysiwyg'
  export default {
    name: 'app',
    components: {
      mdbWysiwyg
    }
  }
</script>

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.

MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2018

<template>
  <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.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>
  </mdb-wysiwyg>
</template>
<script>
  import mdbWysiwyg from 'mdb-wysiwyg'
  export default {
    name: 'app',
    components: {
      mdbWysiwyg
    }
  }
</script>

MDB Vue WYSIWYG Editor - API

Download

This plugin requires a purchase.

Buy Vue WYSIWYG Editor plugin

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.
@getContent event Allows to get the content of the textarea - value is an object with two keys: html and text