Edit these docs Rate these docs

React WYSIWYG Editor

React Bootstrap WYSIWYG Editor plugin

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


Basic Example


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

                const App = () => {
                    const initialContent =
                    `<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;© 2018</p>
                    <p><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>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;
                    </ul>
                    `;

                    return (
                        <>
                            <MDBWysiwyg initialContent={initialContent} />
                        </>
                    );
                };

                export default App;
            

Translations

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


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

                const App = () => {
                    const initialContent =
                        `<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;© 2018</p>
                        `;

                    const translations = {
                        paragraph: 'Párrafo',
                        heading: 'Encabezado',
                        preformatted: 'Preformateado',
                        bold: 'Negrita',
                        italic: 'Itálica',
                        strikeThrough: 'Tachado',
                        underline: 'Subrayado',
                        textcolor: 'Color del texto',
                        justifyLeft: 'Alinear a la izquierda',
                        justifyCenter: 'Alinear al centro',
                        justifyRight: 'Alinear a la derecha',
                        justifyFull: 'Justificar',
                        insertlink: 'Insertar enlace',
                        insertpicture: 'Insertar imagen',
                        insertUnorderedList: 'Lista de viñetas',
                        insertOrderedList: 'Lista numerada',
                        enterurl: 'Insertar enlace',
                        imageurl: 'Insertar enlace de imagen',
                        showHTML: 'Cambiar la vista'
                    }

                    return (
                        <>
                            <MDBWysiwyg initialContent={initialContent} translations={translations} />
                        </>
                    );
                };

                export default App;
            

Custom color palette

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


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

                const App = () => {
                    const initialContent =
                        `<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;© 2018</p>
                        `;

                    return (
                        <>
                            <MDBWysiwyg initialContent={initialContent} colors={['#EA3C3B', '#E00065' , '#FFFFFF' , '#000000' ]} />
                        </>
                    );
                };

                export default App;
            

Install MDB CLI
It's the fastest way to create and host MDB projects
Free Download

Edit these docs Rate these docs

React WYSIWYG Editor - getting started : download & setup


Download

This plugin requires a purchase.

Buy React WYSIWYG Editor plugin

React WYSIWYG Editor - API

In this section you will find advanced information about the WYSIWYG Editor component. You will find out which modules are required & what are the possibilities of configuring the component.


WYSIWYG Editor import statement

In order to use WYSIWYG Editor component make sure you have imported proper module first.


        import MDBWysiwyg from 'mdb-react-wysiwyg';
      

        "mdbreact": "^4.15.0",
        "react-router-dom": "^5.0.1"
      

WYSIWYG Editor PropTypes

The table below shows the configuration options of the WYSIWYG Editor component.

Name Type Default Description Example
initialContent String true Let you set initial content <MDBWysiwyg initialContent="<b>hello</b>" ... />
tooltips Boolean true Shows Bootstrap Tooltips for the toolbar buttons <MDBWysiwyg tooltips={false} ... />
colors Array [ '#EA3C3B', '#E00065', '#9C00B0', '#7000B7', '#533CB4', '#5587F4', '#509EF4', '#46B9D3', '#2E9786', '#4FB54E', '#87CA47', '#C4E534', '#DFDFDF', '#F5C700', '#F49B00', '#F45429', '#75564A', '#9D9C9D', '#657B8A', '#4B506E', '#FFFFFF', '#000000', '#F9E500', '#FF69B4' ] Allows to use custom color palette <MDBWysiwyg colors={['#EA3C3B', '#E00065', '#FFFFFF', '#000000']} ... />
translations Object { paragraph: 'Paragraph', heading: 'Heading', preformatted: 'Preformatted', bold: 'Bold', italic: 'Italic', strikeThrough: 'Strike Through', underline: 'Underline', textcolor: 'Color', justifyLeft: 'Align Left', justifyCenter: 'Align Center', justifyRight: 'Align Right', justifyFull: 'Align Justify', insertlink: 'Insert Link', insertpicture: 'Insert Picture', insertUnorderedList: 'Ordered List', insertOrderedList: 'Numbered List', enterurl: 'Enter a URL', imageurl: 'Image URL', linkdescription: 'Enter a description for this link', linkname: 'Link name', showHTML: 'Change view' } Allows to overwrite default plugin translations <MDBWysiwyg translations={{ paragraph: 'Párrafo', heading: 'Encabezado', preformatted: 'Preformateado', bold: 'Negrita', italic: 'Itálica', strikeThrough: 'Tachado', underline: 'Subrayado', textcolor: 'Color del texto', justifyLeft: 'Alinear a la izquierda', justifyCenter: 'Alinear al centro', justifyRight: 'Alinear a la derecha', justifyFull: 'Justificar', insertlink: 'Insertar enlace', insertpicture: 'Insertar imagen', insertUnorderedList: 'Lista de viñetas', insertOrderedList: 'Lista numerada', enterurl: 'Insertar enlace', imageurl: 'Insertar enlace de imagen', showHTML: 'Cambiar la vista' }} ... />