Awesome

Tiptap for Directus

This is a Directus extension that provides the Tiptap editor as a rich text field type.

The StarterKit tiptap bundle is already included and the other tiptap extensions are available in the directus interface options.

npm package : @bicou/directus-extension-tiptap
✨ Release Notes

Requirements

This extension requires Directus 9 or higher to be installed.

Installation

Add @bicou/directus-extension-tiptap dependency to your directus project.

# Using pnpm
pnpm add @bicou/directus-extension-tiptap
# Using yarn
yarn add @bicou/directus-extension-tiptap
# Using npm
npm install @bicou/directus-extension-tiptap

Usage

Field

When creating a field in Directus choose TipTap.

field creation

Choosing Type allows you to store your content as a JSON object or as a good old HTML string

JSON : the JSON object of the ProseMirror nodes
Text : the HTML content as string

Editor

When editing content items, the Tiptap WYSIWG editor will show up :

editor

Field data and display

By default, the data is shown as raw JSON :

json render

Edit the field to select Tiptap as display ...

display

... to render the text of the field in content browsing :

text render

License

This extension is released under the MIT license. See the LICENSE file for more details.