A Tiptap ingtegration for Filament Admin/Forms.
- Supports Light/Dark Mode
- Fullscreen editing
- Overrideable Media uploading
- Profile based toolbars to simplify reusing features
Install the package via composer
composer require awcodes/filament-tiptap-editor
The editor extends the default Forms Field class so all other methods available on that class can be used when adding it to a form.
use FilamentTiptapEditor\TiptapEditor;
TiptapEditor::make('content')
->profile('simple')
->required(); //->etc
Publish the config file.
php artisan vendor:publish --tag="filament-tiptap-editor-config"
The package comes with 3 profiles for buttons/tools out of the box.
- default: 'bold', 'italic', 'strike', 'underline', 'h1', 'h2', 'h3', 'h4', 'h5', 'h6', 'lead', 'small', 'color', 'bulletList', 'orderedList', 'checkedList', 'align', 'blockquote', 'hr', 'link', 'superscript', 'subscript', 'table', 'grid', 'media', 'youtube', 'vimeo', 'code', 'codeblock', 'source'
- simple: 'bold', 'italic', 'h1', 'h2', 'h3', 'lead', 'hr', 'bulletList', 'orderedList', 'checkedList', 'link', 'media'
- barebone: 'bold', 'italic', 'link', 'bulletList', 'orderedList'
See filament-tiptap-editor.php
config file for modifying profiles to add / remove buttons from the editor or to create your own.
- accepted_file_types: ['image/jpeg', 'image/png', 'image/webp', 'image/svg+xml', 'application/pdf']
- disk: 'public'
- directory: 'images'
- visibility: 'public'
- preserve_file_names: false
- max_file_size: 2042
- image_crop_aspect_ratio: null
- image_resize_target_width: null
- image_resize_target_height: null
- media_uploader_id: 'filament-tiptap-editor-media-uploader-modal'
You may override the default link modal with your own Livewire component and assign its ID to the link_modal_id
setting in the config file.
See vendor/awcodes/resources/views/components/link-modal.blade.php
and vendor/awcodes/filament-tiptap-editor/src/Components/LinkModal.php
for implementation.
You may override the default file uploader with your own Livewire component and assign its ID to the media_uploader_id
setting in the config file.
See vendor/awcodes/resources/views/components/media-uploader-modal.blade.php
and vendor/awcodes/filament-tiptap-editor/src/Components/MediaUploaderModal.php
for implementation.
This projects follow the Semantic Versioning guidelines.
Copyright (c) 2022 Adam Weston and contributors
Licensed under the MIT license, see LICENSE.md for details.