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
Translations
React Bootstrap WYSIWYG Editor comes with the option that allows you to use custom translations for all text in the editor.
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.
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.
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'
}} ... />
|