manogi / nova-tiptap
A Laravel Nova tiptap editor field.
Installs: 86 053
Dependents: 2
Suggesters: 0
Security: 0
Stars: 78
Watchers: 4
Forks: 26
Open Issues: 2
Language:Vue
Requires
- php: >=7.3.0
Requires (Dev)
- laravel/nova: ~3.0
- orchestra/testbench: ^5.3
- phpunit/phpunit: ^9.2
This package is auto-updated.
Last update: 2021-03-22 21:52:26 UTC
README
Laravel Nova Tiptap Editor Field
A Laravel Nova implementation of the tiptap editor for Vue.js by @ueberdosis.
Installation
Install via composer:
composer require manogi/nova-tiptap
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:
Tiptap::make('FieldName') ->buttons([ 'heading', 'italic', 'bold', 'code', 'link', 'strike', 'underline', 'superscript', 'subscript', 'bullet_list', 'ordered_list', 'code_block', 'blockquote', 'table', 'horizontal_rule', 'edit_html' ]) ->headingLevels([2, 3, 4]),
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.
The two different "code" buttons
'code'
is inline code (like <code></code>
) while 'code_block'
will give you <pre><code></code></pre>
.
Edit HTML
the 'edit_html'
option will enable the ability to toggle to the tiptap editor to a textarea and manually edit the HTML
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:
Roadmap
- Add the option to upload or choose images and add them to to the content.
Licence
The MIT License (MIT). Please see License File for more information.