Tailwind CSS WYSIWYG Text Editor - Flowbite

The WYSIWYG text editor from Flowbite is open-source under the MIT license based on the Tip Tap library and allows you to easily edit complex text data with typography styles, links, images, videos, and more.

The markup and styles provided by Flowbite are all built with the utility classes from Tailwind CSS and the styles for the content inside the WYSIWYG text editor are based on the Flowbite Typography plugin.

All examples provided on this page have support for dark mode, RTL (right-to-left) styles, responsiveness on mobile devices and you can easily add your own functionality using JavaScript and the Flowbite API.

Getting started #

Before continuing make sure that you have Tailwind CSS, Flowbite, and Tip Tap installed in your project.

1. Follow the quickstart guide from Flowbite to enable the interactive elements

2. Install the Flowbite Typography plugin to format the content of text inside the WYSYIWYG editor preview:

3. Import the flowbite-typography plugin inside your main Tailwind CSS file:

Alternatively you can do the same but in your tailwind.config.js file:

4. Finally, install Tip Tap either via NPM or skip this step if you’re using CDN:

Now you’re ready to use the examples below by copying the HTML markup and the JavaScript code.

Default text editor #

Use this example of a WYSIWYG text editor to enable basic typography styling and formatting, adding lists, links, images, videos, code blocks, aligning text, blockquotes, setting headers and paragraphs and more.

Notice: there is a known issue from TipTap when splitting blocks (ie. using enter to create break lines) and using the bullet list item. A quickfix for v2.6.6 when using CDN is to match the import statements:

If you’re importing the package with Yarn or NPM then you need to add this in your package.json file:

We recommend later checking the Tip Tap library for a proper update to prevent this quickfix in the future.

Text formatting #

Use this example of a WYSIWYG text editor to enable typography styling, formatting and marking such as underline, bold, italic, strikethrough, code, highlight and also selecting text size, color, font family and more using the utility classes from Tailwind CSS.

Text alignment #

Enable text alignment to the left, center, right, and justify for the content inside of the WYSIWYG component.

Typography elements #

Use this example to create typography elements like bullet lists, ordered lists, blockquotes, horizontal rules, paragraphs, headings, code blocks based on Tailwind CSS utility classees and the Flowbite API.

Configuring links #

Use this example to add and remove anchor links for the content inside of the WYSIWYG text editor.

Using images #

Use this example to learn how to add images inside of the WYSIWYG text editor and configure settings such as the image URL, image alt attribute which is important for SEO and accessibility and the image title.

Adding videos #

Use this example to embed videos inside the WYSIWYG text editor based on a YouTube URL source and set the width and height of the video by using the Flowbite modal component API.

Editing tables #

Use this example to edit table data inside the WYSIWYG text editor by adding and removing table column, rows, and cells and use other features to navigate through the table data for a convenient editing process.

Undo and redo #

Use the history functionality from the WYSIWYG text editor component to integrate undo and redo actions.

Exporting data #

Use the editor.getJSON() and the editor.getHTML() functions to export the text content inside of the WYSIWYG text editor in JSON or raw HTML format to persist into your database or API structure.

Javascript behaviour #

Learn more about how you can programmatically use the WYSIWYG editor using Javascript by creating a new instance of the object, setting options, method, event listeners, and more to integrate with your code base.

After you have installed Tip Tap via NPM or CDN you can create a new Editor object:

Make sure that you also have an empty div element with the appropiate ID:

This code will automatically set up the markup needed inside of the WYSIWYG component. Please note the fact that the Tip Tap library is headless so you need to style the elements yourself, but you can copy-paste the examples from Flowbite on this page.

Content styling #

We also recommend adding custom typography classes from the Flowbite Typography package so that the content inside of the text editor will be correctly styled:

Extensions #

Tip Tap is a modular library meaning that if you want to introduce images, videos, links and other elements inside the WYSIWYG component you need to specifically import that resources from the library and set it as an extension when initialising the Editor object.

Here is one example where we add the link extension:

Links will now be available inside the WYSIWYG component. Learn more about all of the extensions API.

Methods #

You can easily call the methods from the Editor object to set text styles, links, images, and more. Here is one example where based upon a click event on a button you will be prompted with the URL of the link and it will add it to the currently selected text:

And here’s another example where you can unset a link:

Examples from this page have functional elements so you can check the JavaScript tab for the source code.

License #

Resources from this page are licensed under the MIT License, including the Flowbite examples and Tip Tap.