WYSIWYG editor

Vue Bootstrap 5 WYSIWYG editor plugin

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

Note: Read the API tab to find all available options and advanced customization

Basic example


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020

Features:

  • Changing block type
  • Text formatting (bold, italic, strikethrough, underline)
  • Setting text color
  • Setting color highlight
  • Text aligning
  • Creating a list (bulled or numbered)
  • Increase/Decrease indent
  • Inserting links
  • Inserting pictures
  • Insert horizontal line
  • show HTML code
  • Undo/Redo

Options:

  • Translations
  • Using your own color palette
  • Disabling/enabling sections

Methods:

  • Get HTML code from editor
<template>
  <MDBWysiwyg>
    <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;© 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>Setting color highlight</li>
      <li>Text aligning</li>
      <li>Creating a list (bulled or numbered)</li>
      <li>Increase/Decrease indent</li>
      <li>Inserting links</li>
      <li>Inserting pictures</li>
      <li>Insert horizontal line</li>
      <li>show HTML code</li>
      <li>Undo/Redo</li>
    </ul>
    <p><b>Options:</b></p>
    <ul>
      <li>Translations</li>
      <li>Using your own color palette</li>
      <li>Disabling/enabling sections</li>
    </ul>
    <p><b>Methods:</b></p>
    <ul>
      <li>Get HTML code from editor</li>
    </ul>
  </MDBWysiwyg>
</template>
<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  export default {
    components: {
      MDBWysiwyg
    }
  };
</script>
<script setup lang="ts">
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>

Translations

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


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020 

<template>
  <MDBWysiwyg
    :translations="{
      paragraph: 'Paragraf',
      textStyle: 'Styl tekstu',
      heading: 'Nagłówek',
      preformatted: 'Pre-formatowany',
      bold: 'Pogrubienie',
      italic: 'Kursywa',
      strikethrough: 'Przekreślenie',
      underline: 'Podkreślenie',
      textcolor: 'Kolor tekstu',
      textBackgroundColor: 'Kolor zaznaczenia',
      alignLeft: 'Wyśrodkowanie do lewej',
      alignCenter: 'Wyśrodkowanie do środka',
      alignRight: 'Wyśrodkowane do prawej',
      alignJustify: 'Justowanie',
      insertLink: 'Wstaw link',
      insertPicture: 'Wstaw obraz',
      unorderedList: 'Lista punktowa',
      orderedList: 'Lista numerowana',
      increaseIndent: 'Zwiększ wcięcie',
      decreaseIndent: 'Zmniejsz wcięcie',
      insertHorizontalRule: 'Wstaw linię poziomą',
      showHTML: 'Pokaż kod HTML',
      undo: 'Cofnij',
      redo: 'Przywróć',
      addLinkHead: 'Dodaj Link',
      addImageHead: 'Dodaj Obraz',
      linkUrlLabel: 'Wpisz adres:',
      linkDescription: 'Wpisz opis',
      imageUrlLabel: 'Wpisz adres obrazka:',
      okButton: 'OK',
      cancelButton: 'Anuluj',
      moreOptions: 'Pokaż więcej opcji',
    }"
  >
    <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;© 2020
    </p>
  </MDBWysiwyg>
</template>
<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  export default {
    components: {
      MDBWysiwyg
    }
  };
</script>
<script setup lang="ts">
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>

Custom colors

By default, MDBootstrap 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 © 2020

Default Colors:

  • #1266F1 - Primary
  • #B23CFD - Secondary
  • #00B74A - Success
  • #F93154 - Danger
  • #FFA900 - Warning
  • #39C0ED - Info
  • #FBFBFB - Light
  • #262626 - Dark
<template>
  <MDBWysiwyg :colors="['#3949AB', '#00BCD4', '#7CB342']">
    <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;© 2020
    </p>
    <p style="text-align: left"><b>Default Colors:</b></p>
    <ul>
      <li><span style="color: #1266f1">#1266F1 - Primary</span></li>
      <li><span style="color: #b23cfd">#B23CFD - Secondary</span></li>
      <li><span style="color: #00b74a">#00B74A - Success</span></li>
      <li><span style="color: #f93154">#F93154 - Danger</span></li>
      <li><span style="color: #ffa900">#FFA900 - Warning</span></li>
      <li><span style="color: #39c0ed">#39C0ED - Info</span></li>
      <li>
        <span style="color: #fbfbfb; background-color: rgb(38, 38, 38)"
          >#FBFBFB - Light</span
        >
      </li>
      <li><span style="color: #262626">#262626 - Dark</span></li>
    </ul>
  </MDBWysiwyg>
</template>
<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  export default {
    components: {
      MDBWysiwyg
    }
  };
</script>
<script setup lang="ts">
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>

Disable toolbar section

You can disable any section. The full list of sections can be found in the API tab.


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020 

<template>
  <MDBWysiwyg :formattingSection="false" :justifySection="false">
    <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;© 2020
    </p>
  </MDBWysiwyg>
</template>
<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  export default {
    components: {
      MDBWysiwyg
    }
  };
</script>
<script setup lang="ts">
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>

Fixed toolbar

You can add fixed property to pin the toolbar to the top of the screen. This option will be useful when there is a lot of text.


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020 

<template>
  <MDBWysiwyg :fixed="true" :fixedOffsetTop="58">
    <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;© 2020
    </p>
  </MDBWysiwyg>
</template>
<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  export default {
    components: {
      MDBWysiwyg
    }
  };
</script>
<script setup lang="ts">
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>

Fixed toolbar offset

Use the fixedOffsetTop option to set the distance from the top of the screen. This helps to avoid hiding the toolbar behind the navigation bar or other element on the page.


MDBootstrap

WYSIWYG Editor

MDBootstrap.com © 2020 

<template>
  <MDBWysiwyg :fixed="true" :fixedOffsetTop="80">
    <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;© 2020
    </p>
  </MDBWysiwyg>
</template>
<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  export default {
    components: {
      MDBWysiwyg
    }
  };
</script>
<script setup lang="ts">
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>

WYSIWYG editor - API

Import

<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
</script>

Properties

Name Type Default Description
classes String Defines custom classes for component wrapper
colors Array Defines custom color palette
fixed Boolean false Set true to scrolls toolbar with the page until it reaches the top, then stays there
fixedOffsetTop Number 0 Set the distance in pixels from the top edge of the browser
formattingSection Boolean true Set to false to disable the formatting section
justifySection Boolean true Set to false to disable the justify section
listsSection Boolean true Set to false to disable the lists section
linksSection Boolean true Set to false to disable the links section
showCodeSection Boolean true Set to false to disable the show code section
styleSection Boolean true Set to false to disable the styles section
tag String 'div' Sets tag for component wrapper
translations Array Defines custom texts
undoRedoSection Boolean true Set to false to disable the undo-redo section

Methods

Name Description
getCode Get code in HTML format 
<template>
  <MDBBtn color="primary" @click="handleClick">Get Code</MDBBtn>
  <MDBWysiwyg ref="wysiwygRef">
    <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;© 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>Setting color highlight</li>
      <li>Text aligning</li>
      <li>Creating a list (bulled or numbered)</li>
      <li>Increase/Decrease indent</li>
      <li>Inserting links</li>
      <li>Inserting pictures</li>
      <li>Insert horizontal line</li>
      <li>show HTML code</li>
      <li>Undo/Redo</li>
    </ul>
    <p><b>Options:</b></p>
    <ul>
      <li>Translations</li>
      <li>Using your own color palette</li>
      <li>Disabling/enabling sections</li>
    </ul>
    <p><b>Methods:</b></p>
    <ul>
      <li>Get HTML code from editor</li>
    </ul>
  </MDBWysiwyg>
</template>
<script>
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  export default {
    components: {
      MDBWysiwyg,
      MDBBtn,
    },
    setup() {
      const wysiwygRef = ref(null);
      const handleClick = () => console.log(wysiwygRef.value?.getCode());

      return {
        wysiwygRef,
        handleClick,
      };
    },
  };
</script>
<script setup lang="ts">
  import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
  import { MDBBtn } from "mdb-vue-ui-kit";
  import { ref } from "vue";

  const wysiwygRef = ref<InstanceType<typeof MDBWysiwyg> | null>(null);
  const handleClick = () => console.log(wysiwygRef.value?.getCode());
</script>