PHPackages dubizzlelabs/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. dubizzlelabs/nova-tiptap ActiveLibrary[Utility & Helpers](/categories/utility) dubizzlelabs/nova-tiptap ======================== A Laravel Nova tiptap editor field. 2.0.1(1y ago)010MITCSSPHP ^8.1|^8.0|^7.3 Since Dec 16Pushed 1y ago1 watchersCompare [ Source](https://github.com/mueed-dbl/nova-tiptap)[ Packagist](https://packagist.org/packages/dubizzlelabs/nova-tiptap)[ RSS](/packages/dubizzlelabs-nova-tiptap/feed)WikiDiscussions main Synced 1mo ago READMEChangelog (2)Dependencies (3)Versions (3)Used By (0) [![GitHub](https://camo.githubusercontent.com/417b3e3bd632ca879195e32122d9f52ee135409dd220c8133598df6efc718559/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d756565642d647562697a7a6c652f6e6f76612d746970746170)](https://camo.githubusercontent.com/417b3e3bd632ca879195e32122d9f52ee135409dd220c8133598df6efc718559/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f6c6963656e73652f6d756565642d647562697a7a6c652f6e6f76612d746970746170)[![GitHub release (latest by date)](https://camo.githubusercontent.com/9cfd93fa15619112e314c9bba03bca23cb8b0d0d1bcf888f309d36e47b71e858/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d756565642d647562697a7a6c652f6e6f76612d746970746170)](https://camo.githubusercontent.com/9cfd93fa15619112e314c9bba03bca23cb8b0d0d1bcf888f309d36e47b71e858/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f762f72656c656173652f6d756565642d647562697a7a6c652f6e6f76612d746970746170) 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: ``` composer require dubizzleLabs/nova-tiptap ``` 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 DubizzleLabs\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/3.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 27 — LowBetter than 49% of packages Maintenance42 Moderate activity, may be stable Popularity5 Limited adoption so far Community7 Small or concentrated contributor base Maturity48 Maturing project, gaining track record Bus Factor1 Top contributor holds 100% 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 ~0 days Total 2 Last Release 510d ago ### Community Maintainers ![](https://www.gravatar.com/avatar/3326f5920e9f3d17e7fa893998b07b337ee3f07cfc7f720cbb7104a34600ed49?d=identicon)[Mueed-Dubizzle](/maintainers/Mueed-Dubizzle) --- Top Contributors [![mueed-dbl](https://avatars.githubusercontent.com/u/174336376?v=4)](https://github.com/mueed-dbl "mueed-dbl (7 commits)") --- Tags laraveltiptapeditornovavue ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/dubizzlelabs-nova-tiptap/health.svg) ``` [![Health](https://phpackages.com/badges/dubizzlelabs-nova-tiptap/health.svg)](https://phpackages.com/packages/dubizzlelabs-nova-tiptap) ``` ### Alternatives [marshmallow/nova-tiptap A Laravel Nova tiptap editor field. 19120.0k2](/packages/marshmallow-nova-tiptap)[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)[murdercode/nova4-tinymce-editor Boost your Laravel Nova with the TinyMCE editor. 17165.2k](/packages/murdercode-nova4-tinymce-editor)[inspheric/nova-defaultable Default values for Nova fields when creating resources and running resource actions. 51174.8k1](/packages/inspheric-nova-defaultable)[datomatic/nova-detached-actions A Laravel Nova tool to allow for placing actions in the Nova toolbar detached from the checkbox selection mechanism. 11229.2k](/packages/datomatic-nova-detached-actions) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)