gbicouTiptap 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-tiptapUsage
Field
When creating a field in Directus choose TipTap.
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 :
Field data and display
By default, the data is shown as raw JSON :
Edit the field to select Tiptap as display ...
... to render the text of the field in content browsing :
License
This extension is released under the MIT license. See the LICENSE file for more details.