Vue 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

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


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

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


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


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


Vue WYSIWYG editor - API


Import


        import { MDBWysiwyg } from "mdb-vue-wysiwyg-editor";
      

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