1. Components
  2. WYSIWYG Editor

Third-Party Plugins

Tailwind CSS WYSIWYG Editor

WYSIWYG editors are interactive interface that allow users to input and format text as it will appear in its final output. They streamline content creation by providing a visual interface, eliminating the need for direct code manipulation.

Requires Additional Installation

Note that this component requires the use of the third-party Tiptap plugin.

How to use

  1. Add TipTap

    Include the JavaScript <script type="module"> near the end of your </body> tag:

  2. Add extensions

    Add the extensions you plan to use.

  3. Initialize TipTap

    Initialize TipTap with the options appropriate for your case.

  4. Known issues

    Some TipTap extensions may be delivered with different versions of the prosemirror-model library. To avoid errors you should map different versions to the one.


Basic usage

A basic usage of WYSIWYG Editor.

Modal example of WYSIWYG Editor.