https://github.com/gbicou/directus-extension-tiptap

Tiptap rich text editor interface and display for directus
https://github.com/gbicou/directus-extension-tiptap

directus directus-extension directus-extension-display directus-extension-interface editor prosemirror tiptap wysiwyg

Last synced: about 2 months ago
JSON representation

Tiptap rich text editor interface and display for directus

• Host: GitHub
• URL: https://github.com/gbicou/directus-extension-tiptap
• Owner: gbicou
• License: mit
• Created: 2023-03-28T15:02:52.000Z (over 1 year ago)
• Default Branch: main
• Last Pushed: 2024-04-01T03:27:02.000Z (6 months ago)
• Last Synced: 2024-04-14T08:35:46.582Z (6 months ago)
• Topics: directus, directus-extension, directus-extension-display, directus-extension-interface, editor, prosemirror, tiptap, wysiwyg
• Language: Vue
• Homepage:
• Size: 1.37 MB
• Stars: 57
• Watchers: 3
• Forks: 5
• Open Issues: 7
• Metadata Files:
  • Readme: README.md
  • Changelog: CHANGELOG.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-directus - Tiptap Interface & Display - Tiptap rich text editor interface and display. (Extensions / Community)

README

        
# Tiptap for Directus

[![npm version][npm-version-src]][npm-version-href]

[![npm downloads][npm-downloads-src]][npm-downloads-href]

[![License][license-src]][license-href]

This is a [Directus](https://directus.io/) extension that provides the [Tiptap](https://tiptap.dev/) editor as a rich text field type.

The [StarterKit](https://tiptap.dev/api/extensions/starter-kit) 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](/CHANGELOG.md)

## Requirements

This extension requires Directus 9 or higher to be installed.

## Installation

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

```bash

# 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](docs/field.png)

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](https://prosemirror.net/) nodes

- _Text_ : the HTML content as string

### Editor

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

![editor](docs/editor.png)

### Field data and display

By default, the data is shown as raw JSON :

![json render](docs/render.png)

Edit the field to select Tiptap as display ...

![display](docs/display.png)

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

![text render](docs/display-render.png)

## License

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

[npm-version-src]: https://img.shields.io/npm/v/@bicou/directus-extension-tiptap/latest.svg?style=flat&colorA=18181B&colorB=28CF8D

[npm-version-href]: https://npmjs.com/package/@bicou/directus-extension-tiptap

[npm-downloads-src]: https://img.shields.io/npm/dm/@bicou/directus-extension-tiptap.svg?style=flat&colorA=18181B&colorB=28CF8D

[npm-downloads-href]: https://npmjs.com/package/@bicou/directus-extension-tiptap

[license-src]: https://img.shields.io/npm/l/@bicou/directus-extension-tiptap.svg?style=flat&colorA=18181B&colorB=28CF8D

[license-href]: https://npmjs.com/package/@bicou/directus-extension-tiptap