React Bootstrap Wysiwyg
React Wysiwyg - Bootstrap 4 & Material Design
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.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> © 2020</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>
</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.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> © 2020</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.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> © 2020</p>
`;
return (
<>
<MDBWysiwyg initialContent={initialContent} colors={['#EA3C3B', '#E00065' , '#FFFFFF' , '#000000' ]} />
</>
);
};
export default App;
React WYSIWYG Editor - getting started : download & setup
Download
This plugin requires a purchase.
Buy React WYSIWYG Editor plugin
React WYSIWYG - 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'
}} ... />
|