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.

Learn more

How to use

Add TipTap

Include the JavaScript <script type="module"> near the end of your </body> tag:
import { Editor } from 'https://esm.sh/@tiptap/core@2.11.0'; import StarterKit from 'https://esm.sh/@tiptap/starter-kit@2.11.0';
```
                    
                  
```
Add extensions

Add the extensions you plan to use.
import Placeholder from 'https://esm.sh/@tiptap/extension-placeholder'; import OrderedList from 'https://esm.sh/@tiptap/extension-ordered-list'; ...
```
                    
                  
```
Initialize TipTap

Initialize TipTap with the options appropriate for your case.
const editor = new Editor({ element: document.querySelector('#hs-editor-tiptap [data-hs-editor-field]'), extensions: [ StarterKit, Placeholder.configure({ placeholder: 'Add a message, if you\'d like.', emptyNodeClass: 'text-gray-800 dark:text-neutral-200' }), OrderedList.configure({ HTMLAttributes: { class: 'list-decimal list-inside text-gray-800 dark:text-white' } }) ] }); const action = document.querySelector('#hs-editor-tiptap [data-hs-editor-ol]') action.addEventListener('click', () => editor.chain().focus().toggleOrderedList().run());
```
                    
                  
```
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.
<script type="importmap"> { "imports": { "https://esm.sh/v135/prosemirror-model@1.19.3/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.21.0/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.22.1/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.23.0/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.24.0/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs", "https://esm.sh/v135/prosemirror-model@1.24.1/es2022/prosemirror-model.mjs": "https://esm.sh/v135/prosemirror-model@1.20.0/es2022/prosemirror-model.mjs" } } </script>
```
                    
                  
```

Basic usage

A basic usage of WYSIWYG Editor.

actions.forEach(({ id, fn }) => {
                          const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                        });
                      </script>

Alternative blockquote New

Alternative blockquote example.

Modal example of WYSIWYG Editor.

actions.forEach(({ id, fn }) => {
                          const action = document.querySelector(id);

if (action === null) return;

action.addEventListener('click', fn);
                        });
                      </script>

How to use

Add TipTap

Add extensions

Initialize TipTap

Known issues

Basic usage

Alternative blockquote New

Modal example