PHPackages                             manogi/nova-tiptap - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. manogi/nova-tiptap

Abandoned → [https://github.com/marshmallow-packages/nova-tiptap](/?search=https%3A%2F%2Fgithub.com%2Fmarshmallow-packages%2Fnova-tiptap)Library[Utility & Helpers](/categories/utility)

manogi/nova-tiptap
==================

A Laravel Nova tiptap editor field.

v3.2.6(1y ago)171774.0k—4.6%63[1 issues](https://github.com/bastihilger/nova-tiptap/issues)[1 PRs](https://github.com/bastihilger/nova-tiptap/pulls)7MITCSSPHP ^8.0|^8.1CI failing

Since Oct 9Pushed 1y ago3 watchersCompare

[ Source](https://github.com/bastihilger/nova-tiptap)[ Packagist](https://packagist.org/packages/manogi/nova-tiptap)[ RSS](/packages/manogi-nova-tiptap/feed)WikiDiscussions master Synced 1mo ago

READMEChangelog (10)Dependencies (3)Versions (100)Used By (7)Security (1)

[![GitHub](https://camo.githubusercontent.com/850cae521d04f06daa2fd94d848e94bb7e5605ac3594c65b27609fe304e990a5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d616e6f67692f6e6f76612d746970746170)](https://camo.githubusercontent.com/850cae521d04f06daa2fd94d848e94bb7e5605ac3594c65b27609fe304e990a5/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d616e6f67692f6e6f76612d746970746170)[![GitHub release (latest by date)](https://camo.githubusercontent.com/8bc5a04cd9a7c9a2f818f4eebe022ad716843a0ba4b06c70adf62d7933706015/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d616e6f67692f6e6f76612d746970746170)](https://camo.githubusercontent.com/8bc5a04cd9a7c9a2f818f4eebe022ad716843a0ba4b06c70adf62d7933706015/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d616e6f67692f6e6f76612d746970746170)

ABANDONED!
==========

[](#abandoned)

Warning

I had to abandon this project, as I don't use Nova myself anymore since longer than an year now.

**Please use [this maintained version](https://github.com/marshmallow-packages/nova-tiptap) by [Marshmallow Packages](https://github.com/marshmallow-packages) instead.**

Laravel Nova Tiptap Editor Field
================================

[](#laravel-nova-tiptap-editor-field)

A Laravel Nova implementation of the [tiptap editor for Vue.js](https://github.com/ueberdosis/tiptap) by [@ueberdosis](https://github.com/ueberdosis).

Installation
------------

[](#installation)

Install via composer:

**For Nova 4 use this** (it installs Version 3 of nova-tiptap):

```
composer require manogi/nova-tiptap
```

**For Nova 3 use this** (it installs Version 2 of nova-tiptap):

```
composer require manogi/nova-tiptap "^2.8"
```

Usage with default settings:
----------------------------

[](#usage-with-default-settings)

```
Tiptap::make('FieldName')
```

This will give you just the bold and italic buttons.

You will also have to add this `use` statement to the top of the file:

```
use Manogi\Tiptap\Tiptap;
```

Usage with your selection of buttons:
-------------------------------------

[](#usage-with-your-selection-of-buttons)

```
Tiptap::make('FieldName')
  ->buttons([
        'heading',
        '|',
        'italic',
        'bold',
        '|',
        'link',
        'code',
        'strike',
        'underline',
        'highlight',
        '|',
        'bulletList',
        'orderedList',
        'br',
        'codeBlock',
        'blockquote',
        '|',
        'horizontalRule',
        'hardBreak',
        '|',
        'table',
        '|',
        'image',
        '|',
        'textAlign',
        '|',
        'rtl',
        '|',
        'history',
        '|',
        'editHtml',
    ])
    ->headingLevels([2, 3, 4]),
```

`|` and `br`
------------

[](#-and-br)

You can use `|` to define a vertical line between two buttons, and you can use `br` to define a hard break after a button.

Headings and `headingLevels`
----------------------------

[](#headings-and-headinglevels)

When just passing the string `'heading'` you will have H1, H2 and H3 to choose from. You can set the level of headings by using for example `headingLevels([2, 3, 4])` which will give you H2 through H4.

Links and `linkSettings` and `fileSettings`
-------------------------------------------

[](#links-and-linksettings-and-filesettings)

When just passing the string `'link'` you will be able to link text with an URL and define if the link should open in a new window. You will also be able to link text with a file you uploaded to the server. You can optionally use `linkSettings` to define if this file upload should be possible/visible like so:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'link',
  ])
  ->linkSettings([
      'withFileUpload' => false,
  ]),
```

And you can optionally use `fileSettings` to define the **disk** and the **path**:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'link',
  ])
  ->fileSettings([
      'disk' => 'your_custom_disk',
      'path' => 'your/custom/path',
  ]),
```

If no disk is defined here, it assumes `public` if a `public` disk is defined in your `config/filesystems.php`, otherwise it assumes `config('filesystems.default')`.

And if no path is defined here, it assumes the root folder of that disk.

Images and `imageSettings`
--------------------------

[](#images-and-imagesettings)

With the button `'image'` you can let the user add images either from a file upload or from adding a URL. And you can optionally use `imageSettings` to define the **disk** and the **path**:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'image',
  ])
  ->imageSettings([
      'disk' => 'your_custom_disk',
      'path' => 'your/custom/path',
  ]),
```

If no disk is defined here, it assumes `public` if a `public` disk is defined in your `config/filesystems.php`, otherwise it assumes `config('filesystems.default')`.

And if no path is defined here, it assumes the root folder of that disk.

### Disallowing file upload for images

[](#disallowing-file-upload-for-images)

For images you can also disallow the file upload completely with the `withFileUpload` attribute:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'image',
  ])
  ->imageSettings([
      'withFileUpload' => false,
  ]),
```

Text alignment with `textAlign`
-------------------------------

[](#text-alignment-with-textalign)

When adding `textAlign` you get four buttons for aligning text **left**, **right**, **center** and **justify**. The default alignment will be **left**.

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'textAlign',
  ]),
```

If you want to change some of this, you can use the methods `alignments` and `defaultAlignment`:

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'textAlign',
  ])
  ->alignments(['right', 'left'])
  ->defaultAlignment('right'),
```

RTL support with `rtl`
----------------------

[](#rtl-support-with-rtl)

When adding `rtl` you get a button for toggling RTL mode for all selected block elements (`dir="rtl"`).

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'rtl',
  ]),
```

The two different "code" buttons
--------------------------------

[](#the-two-different-code-buttons)

`'code'` is inline code (like ``) while `'codeBlock'` will give you ``.

Syntax Highlighting when using `codeBlock`
------------------------------------------

[](#syntax-highlighting-when-using-codeblock)

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code',
      'codeBlock'
  ])
  ->syntaxHighlighting(),
```

When using `'codeBlock'` you can turn on syntax highlighting by using `syntaxHighlighting()`.

Edit HTML
---------

[](#edit-html)

the `'editHtml'` option will enable the ability to toggle to the tiptap editor to a textarea and manually edit the HTML

### HTML theme when using `editHtml`

[](#html-theme-when-using-edithtml)

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code',
      'editHtml'
  ])
  ->htmlTheme('night'),
```

When using `'editHtml'` you can set the theme by using using `htmlTheme()`. The default theme used is "material". You can find all the codemirror themes used [here](https://codemirror.net/demo/theme.html) .

Save JSON
---------

[](#save-json)

You can optionally use `saveAsJson` to enable the ability to save the tiptap editor content as JSON in the field

```
Tiptap::make('FieldName')
  ->buttons([
      'italic',
      'bold',
      'code'
  ])
  ->saveAsJson(),
```

Visibility in index view
------------------------

[](#visibility-in-index-view)

Like `Textarea` and `Trix` fields this field is hidden from index views. You can make the content visible by using a [computed field](https://nova.laravel.com/docs/4.0/resources/fields.html#computed-fields).

Screenshots
-----------

[](#screenshots)

The tiptap editor with all the buttons:

[![the tiptap editor with all the buttons](readme-images/all-buttons.png)](readme-images/all-buttons.png)

The idea is that the editor can be themed together with the rest of Nova - here it is looking differently just by using the [Laravel Nova Stripe Theme](https://github.com/jameslkingsley/nova-stripe-theme):

[![the tiptap editor with all the buttons](readme-images/stripe-theme.png)](readme-images/stripe-theme.png)

Licence
-------

[](#licence)

The MIT License (MIT). Please see [License File](LICENCE) for more information.

###  Health Score

57

—

FairBetter than 98% of packages

Maintenance37

Infrequent updates — may be unmaintained

Popularity56

Moderate usage in the ecosystem

Community33

Small or concentrated contributor base

Maturity87

Battle-tested with a long release history

 Bus Factor1

Top contributor holds 80.9% of commits — single point of failure

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~22 days

Recently: every ~51 days

Total

95

Last Release

690d ago

Major Versions

v1.4.1 → v2.0-beta2021-06-02

v2.8.0 → v3.0.02022-04-24

v2.8.2 → v3.0.32022-04-26

v2.8.3 → v3.1.12022-07-04

v2.9.0 → v3.2.22023-12-06

PHP version history (5 changes)0.0.1PHP >=7.1.0

v1.1.0PHP ^7.3.0

v2.0-alphaPHP >=7.3.0

v2.8.0PHP ^8.1|^8.0|^7.3

v3.0.0PHP ^8.0|^8.1

### Community

Maintainers

![](https://www.gravatar.com/avatar/bbdadd3d1931366139b27d9b8a39e7edc03cb99aa82ee126e54c77ac089d4d0c?d=identicon)[manogi](/maintainers/manogi)

---

Top Contributors

[![bastihilger](https://avatars.githubusercontent.com/u/1419634?v=4)](https://github.com/bastihilger "bastihilger (114 commits)")[![OpJePl44tsm4n](https://avatars.githubusercontent.com/u/1597659?v=4)](https://github.com/OpJePl44tsm4n "OpJePl44tsm4n (6 commits)")[![stevelacey](https://avatars.githubusercontent.com/u/289531?v=4)](https://github.com/stevelacey "stevelacey (3 commits)")[![andrerei](https://avatars.githubusercontent.com/u/7910876?v=4)](https://github.com/andrerei "andrerei (2 commits)")[![timothepearce](https://avatars.githubusercontent.com/u/11693661?v=4)](https://github.com/timothepearce "timothepearce (2 commits)")[![tmorian](https://avatars.githubusercontent.com/u/10041902?v=4)](https://github.com/tmorian "tmorian (2 commits)")[![jameshind17](https://avatars.githubusercontent.com/u/26124703?v=4)](https://github.com/jameshind17 "jameshind17 (1 commits)")[![jornn178](https://avatars.githubusercontent.com/u/161015785?v=4)](https://github.com/jornn178 "jornn178 (1 commits)")[![LuckyLukas98](https://avatars.githubusercontent.com/u/26529042?v=4)](https://github.com/LuckyLukas98 "LuckyLukas98 (1 commits)")[![grevzi](https://avatars.githubusercontent.com/u/16935387?v=4)](https://github.com/grevzi "grevzi (1 commits)")[![ryanmitchell](https://avatars.githubusercontent.com/u/51899?v=4)](https://github.com/ryanmitchell "ryanmitchell (1 commits)")[![shaffe-fr](https://avatars.githubusercontent.com/u/3834222?v=4)](https://github.com/shaffe-fr "shaffe-fr (1 commits)")[![drobee](https://avatars.githubusercontent.com/u/2998645?v=4)](https://github.com/drobee "drobee (1 commits)")[![xenothanhojem](https://avatars.githubusercontent.com/u/25053676?v=4)](https://github.com/xenothanhojem "xenothanhojem (1 commits)")[![zweigmbh](https://avatars.githubusercontent.com/u/38290260?v=4)](https://github.com/zweigmbh "zweigmbh (1 commits)")[![u12206050](https://avatars.githubusercontent.com/u/6641242?v=4)](https://github.com/u12206050 "u12206050 (1 commits)")[![hanspagel](https://avatars.githubusercontent.com/u/1577992?v=4)](https://github.com/hanspagel "hanspagel (1 commits)")[![ImJustToNy](https://avatars.githubusercontent.com/u/5730766?v=4)](https://github.com/ImJustToNy "ImJustToNy (1 commits)")

---

Tags

laraveltiptapeditornovavue

###  Code Quality

TestsPHPUnit

### Embed Badge

![Health badge](/badges/manogi-nova-tiptap/health.svg)

```
[![Health](https://phpackages.com/badges/manogi-nova-tiptap/health.svg)](https://phpackages.com/packages/manogi-nova-tiptap)
```

###  Alternatives

[marshmallow/nova-tiptap

A Laravel Nova tiptap editor field.

19120.0k2](/packages/marshmallow-nova-tiptap)[optimistdigital/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2872.1M6](/packages/optimistdigital-nova-sortable)[outl1ne/nova-sortable

This Laravel Nova package allows you to reorder models in a Nova resource's index view using drag & drop.

2861.8M9](/packages/outl1ne-nova-sortable)[optimistdigital/nova-multiselect-field

A multiple select field for Laravel Nova.

3403.5M7](/packages/optimistdigital-nova-multiselect-field)[advoor/nova-editor-js

A Laravel Nova field bringing EditorJs magic to Nova.

92179.0k3](/packages/advoor-nova-editor-js)[sbine/route-viewer

A Laravel Nova tool to view your registered routes.

57215.9k](/packages/sbine-route-viewer)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)