Strapi plugin logo for Tiptap editor

Tiptap editor

It's a dead simple, and easy to use drop-in replacement for the built in strapi WYSIWYG editor. It's build upon the TipTap editor. It saves as plain HTML, making it easy to use with various frontends.

thumbnail for Tiptap editor

Strapi TipTap Editor

npm NPM GitHub issues

A drop-in replacement for the strapi editor.

Screenshot of the editor

What is this?

It's a dead simple, and easy to use drop-in replacement for the built-in strapi WYSIWYG editor. It's build upon the TipTap editor. It saves as plain HTML, making it easy to use with various frontends.

Why make this?

The main reason was, that I thought that the built-in WYSIWYG editor in strapi could be better. I needed to support tables and css columns. Another requirement was also make it outputted pure html, and has a nice and easy to user interface. I don't want to keep toggling between editor mode and preview mode, just to see what I'm making.

Requirements

It's build for Strapi v4.

It has been tested to work with v4.1.1 and I assume it should keep working with later versions.

Cool! But how do I use it?

Luckily it's very easy to use. Just follow these instructions:

# Install the dependency
npm install strapi-tiptap-editor

# Build the Strapi Admin
npm run build

You are now using the new editor!

You can verify it, by looking at the plugins page inside Strapi

Strapi plugin page

I'm having issues, or have a suggestion!

Ouch, that's no good if you have an issue! Suggestions are more than welcome, and feel free to go to the issues tab, and submit your issue/suggestion, and I will look at it as soon as possible!

Install now

npm install strapi-tiptap-editor

Last updated

16 days ago

Strapi Version

4.0 and above

Author

github profile image for dasmikko
dasmikko

Useful links

Create your own plugin

Check out the available plugin resources that will help you to develop your plugin or provider and get it listed on the marketplace.