WYSIWYG editor
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
Note: Currently, the plugin is only compatible with the basic MDB package imported in UMD format. More about import MDB formats.
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.
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 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.
Fixed toolbar
You can set data-mdb-wysiwyg-fixed="true" to pin the toolbar to the top of the screen. This option will be useful when there is a lot of text.
Fixed toolbar offset
Use the data-mdb-wysiwyg-fixed-offset-top 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.