TheLazy.Dev
Portfolio GitHub

Blog

tailwindcss |opensource |webdev |flowbite

Open-source WYSIWYG text editor component built with Tailwind CSS and Flowbite

zoltanszogyenyi

Zoltán Szőgyényi

Posted on September 29, 2024

Open-source WYSIWYG text editor component built with Tailwind CSS and 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.

Follow the quickstart guide from Flowbite to enable the interactive elements

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

npm i flowbite-typography
Enter fullscreen mode Exit fullscreen mode

Require the plugin inside the tailwind.config.js file:

  theme: {
    // ...
  },
  plugins: [
    require('flowbite-typography'),
    // ...
  ],
}
Enter fullscreen mode Exit fullscreen mode

Set the wysiwyg field from the Flowbite plugin to true to enable pseudo styles:

plugins: [
  require('flowbite/plugin')({
      wysiwyg: true,
  }),
  // ... other plugins
]
Enter fullscreen mode Exit fullscreen mode

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

npm install @tiptap/core @tiptap/pm @tiptap/starter-kit
Enter fullscreen mode Exit fullscreen mode

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.

Tailwind CSS WYSIWYG

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.

Tailwind CSS WYSIWYG formatting

Text alignment

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

Tailwind CSS WYSIWYG text alignment

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.

Tailwind CSS WYSIWYHG typography

Configuring links

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

Tailwind CSS WYSIWYG links

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.

Tailwind CSS WYSIWYG images

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.

Tailwind CSS WYSIWYGH videos

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.

Tailwind CSS WYSIWYG tables

Undo and redo

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

Tailwind CSS WYSIWYG undo redo

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.

Tailwind CSS WYSIWYG export data

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:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';

new Editor({
  element: document.getElementById('wysiwyg'),
  extensions: [StarterKit],
  content: '<p>Welcome to Flowbite!</p>',
})
Enter fullscreen mode Exit fullscreen mode

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

<div id="wysiwyg"></div>
Enter fullscreen mode Exit fullscreen mode

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:

new Editor({
  element: document.getElementById('wysiwyg'),
  extensions: [StarterKit],
  content: '<p>Welcome to Flowbite!</p>',
  editorProps: {
        attributes: {
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
        },
    }
})
Enter fullscreen mode Exit fullscreen mode

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:

import { Editor } from '@tiptap/core';
import StarterKit from '@tiptap/starter-kit';
import Link from '@tiptap/extension-link';

const editor = new Editor({
    element: document.querySelector('#wysiwyg-links-example'),
    extensions: [
        StarterKit,
        Link.configure({
            openOnClick: false,
            autolink: true,
            defaultProtocol: 'https',
        })
    ],
    content: '<p>Flowbite is an <strong>open-source library of UI components</strong> based on the utility-first Tailwind CSS framework featuring dark mode support, a Figma design system, and more.</p><p>It includes all of the commonly used components that a website requires, such as buttons, dropdowns, navigation bars, modals, datepickers, advanced charts and the list goes on.</p><p>Learn more about all components from the <a href="https://flowbite.com/docs/getting-started/introduction/">Flowbite Docs</a>.</p>',
    editorProps: {
        attributes: {
            class: 'format lg:format-lg dark:format-invert focus:outline-none format-blue max-w-none',
        },
    }
});
Enter fullscreen mode Exit fullscreen mode

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:

// set up custom event listeners for the buttons
document.getElementById('toggleLinkButton').addEventListener('click', () => {
    const url = window.prompt('Enter image URL:', 'https://flowbite.com');
    editor.chain().focus().toggleLink({ href: url }).run();
});
Enter fullscreen mode Exit fullscreen mode

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

// unset the links based on a button click
document.getElementById('removeLinkButton').addEventListener('click', () => {
    editor.chain().focus().unsetLink().run()
});
Enter fullscreen mode Exit fullscreen mode

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.

Credits

These examples could not have been done without the usage of the following open-source resources:

💖 💪 🙅 🚩
zoltanszogyenyi
Zoltán Szőgyényi

Posted on September 29, 2024

Join Our Newsletter. No Spam, Only the good stuff.

Sign up to receive the latest update from our blog.

Related

Open-source WYSIWYG text editor component built with Tailwind CSS and Flowbite
tailwindcss Open-source WYSIWYG text editor component built with Tailwind CSS and Flowbite

September 29, 2024