Filament Tinyeditor Laravel Package

Getting Started

Minimal Setup

1. Installation:

   composer require visualbuilder/filament-tinyeditor:^5.0  # For Filament 5.x
   

   Publish assets/config:

   php artisan vendor:publish --provider="Visualbuilder\FilamentTinyEditor\TinyeditorServiceProvider" --tag=config,views,public
   

2. First Use Case: Replace a standard Textarea field in a Filament form with the TinyMCE editor:

   use Visualbuilder\FilamentTinyEditor\TinyEditor;
   
   TinyEditor::make('description')
       ->columnSpanFull()
       ->required();
   

3. Where to Look First:

   • config/tinyeditor.php (published config for TinyMCE settings like toolbar buttons, plugins, etc.)
   • resources/views/vendor/filament-tinyeditor/ (customizable blade templates for editor UI)
   • TinyMCE Docs (for advanced editor configurations)

Implementation Patterns

Core Workflows

1. Basic Form Integration:

   // In a Filament Resource Form
   TinyEditor::make('body')
       ->rules(['required', 'min:100'])
       ->columnSpan('full');
   

2. Dynamic Configuration: Use the config() method to pass TinyMCE-specific settings:

   TinyEditor::make('content')
       ->config([
           'toolbar' => 'bold italic bullist numlist link',
           'plugins' => 'link lists',
       ]);
   

3. File Attachments: Enable file uploads with:

   TinyEditor::make('article')
       ->fileAttachmentsDisk('s3')
       ->fileAttachmentsVisibility('private')
       ->fileAttachmentsDirectory('articles/{year}');
   

4. Profiles (Predefined Configs): Leverage built-in profiles (e.g., default, simple, mini):

   TinyEditor::make('short_desc')->profile('mini');
   

5. Livewire Component Integration: Use the editor in custom Livewire components:

   use Visualbuilder\FilamentTinyEditor\Widgets\TinyEditorWidget;
   
   TinyEditorWidget::make('custom_editor')
       ->config(['height' => 300]);
   

Advanced Patterns

1. Custom Toolbar: Override the default toolbar via config:

   // config/tinyeditor.php
   'toolbar' => 'undo redo | bold italic | alignleft aligncenter alignright',
   

2. Image Uploads: Configure image handling in config/tinyeditor.php:

   'images_upload_url' => '/filament-tinyeditor/upload-image',
   'images_upload_handler' => \App\Actions\UploadImage::class,
   

3. Table of Contents (ToC): Enable ToC plugin:

   TinyEditor::make('long_form')
       ->config(['plugins' => 'toc', 'toolbar' => 'toc']);
   

4. Custom CSS/JS: Extend the editor’s assets via published public tag:

   // resources/js/filament-tinyeditor-extensions.js
   tinymce.PluginManager.add('custom_plugin', function(editor) {
       editor.addButton('custom_btn', { ... });
   });
   

5. Multi-Language Support: Pass language config:

   TinyEditor::make('multilingual_content')
       ->config(['language' => 'es']);
   

Gotchas and Tips

Common Pitfalls

1. Asset Publishing:

   • Forgetting to publish assets (--tag=public) will break editor initialization.
   • Fix: Run php artisan vendor:publish --tag=public after installation.

2. File Uploads:

   • If fileAttachmentsDisk is not set, uploads will fail silently.
   • Tip: Verify disk exists in config/filesystems.php.

3. TinyMCE Version Mismatch:

   • Using ^5.0 with Filament 4.x will cause errors. Stick to version table compatibility.

4. Livewire Conflicts:

   • If using custom Livewire components, ensure TinyMCE is initialized after Livewire mounts.
   • Fix: Use mounted() hook in Livewire to initialize the editor.

5. CORS Issues:

   • File uploads to external disks (e.g., S3) may fail due to CORS.
   • Tip: Configure CORS headers on your storage endpoint.

Debugging Tips

1. Console Errors: Check browser console for tinymce errors (e.g., missing plugins or API keys).

2. Editor Not Loading:

   • Verify tinymce script is loaded (check published public assets).
   • Clear Laravel cache (php artisan cache:clear) if editor fails to initialize.

3. Configuration Overrides:

   • Config in config/tinyeditor.php overrides per-field settings.
   • Debug: Temporarily disable config publishing to isolate issues.

4. File Attachments:

   • Test uploads with fileAttachmentsVisibility('public') for debugging.
   • Check storage logs for failed uploads.

Extension Points

1. Custom Plugins: Extend TinyMCE via the config method:

   TinyEditor::make('editor')
       ->config([
           'plugins' => 'custom_plugin',
           'setup' => 'function(editor) { editor.plugins.custom_plugin.init(); }',
       ]);
   

2. Event Listeners: Listen to TinyMCE events (e.g., init, change) via JavaScript:

   tinymce.init({
       selector: '#filament-tinyeditor',
       setup: function(editor) {
           editor.on('change', function() { /* ... */ });
       }
   });
   

3. Blade Templates: Override editor templates by publishing views and modifying:

   • resources/views/vendor/filament-tinyeditor/editor.blade.php
   • resources/views/vendor/filament-tinyeditor/field.blade.php

4. API Key Management: For TinyMCE Cloud, store the API key in .env:

   TINYMCE_API_KEY=your_key_here
   

   Then reference it in config/tinyeditor.php:

   'api_key' => env('TINYMCE_API_KEY'),
   

5. Performance:

   • Disable unused plugins to reduce load time.
   • Use profile('mini') for lightweight editors.