WYSIWYG editor

React 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
import React from 'react';
import { MDBWysiwyg } from 'mdb-react-wysiwyg';

export default function App() {
  return (
    <MDBWysiwyg>
      <br />
      <p style={{ textAlign: 'center' }}>
        <img
          src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
          className='img-fluid'
        />
      </p>
      <h1 style={{ textAlign: 'center' }}>MDBootstrap</h1>
      <p style={{ textAlign: 'center' }}>WYSIWYG Editor</p>
      <p style={{ textAlign: 'center' }}>
        <a
          href='https://mdbootstrap.com'
          target='_blank'
          contentEditable={false}
          style={{ fontSize: '1rem', textAlign: 'left' }}
        >
          MDBootstrap.com
        </a>
        &nbsp;© 2020
      </p>
      <p style={{ textAlign: '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>
  );
}

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 

import React from 'react';
import { MDBWysiwyg } from 'mdb-react-wysiwyg';

export default function App() {
  return (
    <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={{ textAlign: 'center' }}>
        <img
          src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
          className='img-fluid'
        />
      </p>
      <h1 style={{ textAlign: 'center' }}>MDBootstrap</h1>
      <p style={{ textAlign: 'center' }}>WYSIWYG Editor</p>
      <p style={{ textAlign: 'center' }}>
        <a
          href='https://mdbootstrap.com'
          target='_blank'
          contentEditable={false}
          style={{ fontSize: '1rem', textAlign: 'left' }}
        >
          MDBootstrap.com
        </a>
        &nbsp;© 2020
      </p>
    </MDBWysiwyg>
  );
}

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
import React from 'react';
import { MDBWysiwyg } from 'mdb-react-wysiwyg';

export default function App() {
  return (
    <MDBWysiwyg colors={['#3949AB', '#00BCD4', '#7CB342']}>
      <br />
      <p style={{ textAlign: 'center' }}>
        <img
          src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
          className='img-fluid'
        />
      </p>
      <h1 style={{ textAlign: 'center' }}>MDBootstrap</h1>
      <p style={{ textAlign: 'center' }}>WYSIWYG Editor</p>
      <p style={{ textAlign: 'center' }}>
        <a
          href='https://mdbootstrap.com'
          target='_blank'
          contentEditable={false}
          style={{ fontSize: '1rem', textAlign: 'left' }}
        >
          MDBootstrap.com
        </a>
        &nbsp;© 2020
      </p>
      <p style={{ textAlign: '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', backgroundColor: 'rgb(38, 38, 38)' }}>#FBFBFB - Light</span>
        </li>
        <li>
          <span style={{ color: '#262626' }}>#262626 - Dark</span>
        </li>
      </ul>
    </MDBWysiwyg>
  );
}

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 

import React from 'react';
import { MDBWysiwyg } from 'mdb-react-wysiwyg';

export default function App() {
  return (
    <MDBWysiwyg disableFormatting disableJustify>
      <br />
      <p style={{ textAlign: 'center' }}>
        <img
          src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
          className='img-fluid'
        />
      </p>
      <h1 style={{ textAlign: 'center' }}>MDBootstrap</h1>
      <p style={{ textAlign: 'center' }}>WYSIWYG Editor</p>
      <p style={{ textAlign: 'center' }}>
        <a
          href='https://mdbootstrap.com'
          target='_blank'
          contentEditable={false}
          style={{ fontSize: '1rem', textAlign: 'left' }}
        >
          MDBootstrap.com
        </a>
        &nbsp;© 2020
      </p>
    </MDBWysiwyg>
  );
}

Fixed toolbar

You can set fixedTop 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 

import React from 'react';
import { MDBWysiwyg } from 'mdb-react-wysiwyg';

export default function App() {
  return (
    <MDBWysiwyg fixedTop>
      <br />
      <p style={{ textAlign: 'center' }}>
        <img
          src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
          className='img-fluid'
        />
      </p>
      <h1 style={{ textAlign: 'center' }}>MDBootstrap</h1>
      <p style={{ textAlign: 'center' }}>WYSIWYG Editor</p>
      <p style={{ textAlign: 'center' }}>
        <a
          href='https://mdbootstrap.com'
          target='_blank'
          contentEditable={false}
          style={{ fontSize: '1rem', textAlign: 'left' }}
        >
          MDBootstrap.com
        </a>
        &nbsp;© 2020
      </p>
    </MDBWysiwyg>
  );
}

Fixed toolbar offset

Use the offsetTop property 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 

import React from 'react';
import { MDBWysiwyg } from 'mdb-react-wysiwyg';

export default function App() {
  return (
    <MDBWysiwyg fixedTop offsetTop='80px'>
      <br />
      <p style={{ textAlign: 'center' }}>
        <img
          src='https://mdbootstrap.com/wp-content/uploads/2018/06/logo-mdb-jquery-small.webp'
          className='img-fluid'
        />
      </p>
      <h1 style={{ textAlign: 'center' }}>MDBootstrap</h1>
      <p style={{ textAlign: 'center' }}>WYSIWYG Editor</p>
      <p style={{ textAlign: 'center' }}>
        <a
          href='https://mdbootstrap.com'
          target='_blank'
          contentEditable={false}
          style={{ fontSize: '1rem', textAlign: 'left' }}
        >
          MDBootstrap.com
        </a>
        &nbsp;© 2020
      </p>
    </MDBWysiwyg>
  );
}

WYSIWYG editor - API

Import

import { MDBWysiwyg } from 'mdb-react-wysiwyg';

Properties

Wysiwyg

Name Type Default Description Example
colors Array<string> Defines custom color palette <MDBWysiwyg colors={customColors} />
translations TranslationsObject Defines custom texts <MDBWysiwyg translations={translations} />
disableStyles boolean false Set to false to disable the styles section <MDBWysiwyg disableStyles />
disableFormatting boolean false Set to false to disable the formatting section <MDBWysiwyg disableFormatting />
disableJustify boolean false Set to false to disable the justify section <MDBWysiwyg disableJustify />
disableLists boolean false Set to false to disable the lists section <MDBWysiwyg disableLists />
disableLinks boolean false Set to false to disable the links section <MDBWysiwyg disableLinks />
disableCode boolean false Set to false to disable the show code section <MDBWysiwyg disableCode />
disableUndoRedo boolean false Set to false to disable the undo-redo section <MDBWysiwyg disableUndoRedo />
fixedTop boolean false Set true to scrolls toolbar with the page until it reaches the top, then stays there <MDBWysiwyg fixedTop />
offsetTop string '0px' Set the distance in pixels from the top edge of the browser <MDBWysiwyg fixedTop offsetTop='90px' />

Advanced types

TranslationsObject

type TranslationsObject = {
  paragraph?: string;
  textStyle?: string;
  heading?: string;
  preformatted?: string;
  bold?: string;
  italic?: string;
  strikethrough?: string;
  underline?: string;
  textcolor?: string;
  textBackgroundColor?: string;
  alignLeft?: string;
  alignCenter?: string;
  alignRight?: string;
  alignJustify?: string;
  insertLink?: string;
  insertPicture?: string;
  unorderedList?: string;
  orderedList?: string;
  increaseIndent?: string;
  decreaseIndent?: string;
  insertHorizontalRule?: string;
  showHTML?: string;
  undo?: string;
  redo?: string;
  addLinkHead?: string;
  addImageHead?: string;
  linkUrlLabel?: string;
  linkDescription?: string;
  imageUrlLabel?: string;
  okButton?: string;
  cancelButton?: string;
  moreOptions?: string;
};

Events

Name Type Description
onChange (value: string) => void This event fires when the input changes. It returns the HTML code.