Download the PHP package marshmallow/nova-tiptap without Composer
On this page you can find all versions of the php package marshmallow/nova-tiptap. It is possible to download/install these versions without Composer. Possible dependencies are resolved automatically.
Informations about the package nova-tiptap
Laravel Nova Tiptap Editor Field
A Laravel Nova implementation of the tiptap editor for Vue.js by @ueberdosis.
[!Warning] If you are updating from
manogi/nova-tiptap
, please note that we have updated the namespace. For now, this is the only breaking change. You should replace allManogi\Tiptap\Tiptap
withMarshmallow\Tiptap\Tiptap
and you are good to go. This new version also has support for Nova 5.[!IMPORTANT] This is copy of the original package by Sebastian Hilger, you can reference old issues and stuff on his github page. He had to abandon this project, as he doesn't use Nova anymore. Because we do use it in our customer projects, we desided to create a new package to maintain.
Installation
Install via composer:
Usage with default settings:
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:
Usage with your selection of buttons:
|
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
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
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:
And you can optionally use fileSettings
to define the disk and the 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
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:
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
For images you can also disallow the file upload completely with the withFileUpload
attribute:
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.
If you want to change some of this, you can use the methods alignments
and defaultAlignment
:
RTL support with rtl
When adding rtl
you get a button for toggling RTL mode for all selected block elements (dir="rtl"
).
The two different "code" buttons
'code'
is inline code (like <code></code>
) while 'codeBlock'
will give you <pre><code></code></pre>
.
Syntax Highlighting when using codeBlock
When using 'codeBlock'
you can turn on syntax highlighting by using syntaxHighlighting()
.
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
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 .
Save JSON
You can optionally use saveAsJson
to enable the ability to save the tiptap editor content as JSON in the field
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.
Screenshots
The tiptap editor with all the buttons:
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:
Licence
The MIT License (MIT). Please see License File for more information.