Filament Tinyeditor Laravel Package

Getting Started

Minimal Setup

1. Install the package for your Filament version:

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

2. Publish assets and config (required for full functionality):

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

3. Use in a form (e.g., Create/Edit resource):

   use AmidEsfahani\FilamentTinyEditor\TinyEditor;
   
   TinyEditor::make('content')
       ->profile('default') // or 'simple', 'full', 'minimal'
       ->required();
   

First Use Case

Replace a Textarea or RichEditor field in a Filament form with a TinyMCE-powered editor for richer content editing (e.g., for blog posts, CMS pages, or documentation). Example:

// In a Filament Resource Form
public static function form(Form $form): Form
{
    return $form
        ->schema([
            TinyEditor::make('body')
                ->profile('full')
                ->columnSpan('full'),
        ]);
}

Implementation Patterns

Core Workflows

1. Profile-Based Configuration Leverage predefined profiles (default, simple, full, minimal) to quickly configure toolbars and plugins. Extend with custom profiles via config/filament-tinyeditor.php:

   'profiles' => [
       'custom' => [
           'plugins' => 'link image lists',
           'toolbar' => 'bold italic | link image',
       ],
   ],
   

   Use in code:

   TinyEditor::make('content')->profile('custom');
   

2. File Attachments Enable image/media uploads with:

   TinyEditor::make('content')
       ->fileAttachmentsDisk('public')
       ->fileAttachmentsDirectory('uploads')
       ->fileAttachmentsVisibility('public');
   

   • Note: Ensure your storage disk (public) is configured in config/filesystems.php.

3. RTL/LTR Direction For multilingual apps, set direction globally in config/filament-tinyeditor.php or per-field:

   TinyEditor::make('arabic_content')->direction('rtl');
   

4. Modal Integration The editor opens in a modal by default. Customize modal behavior via:

   TinyEditor::make('content')
       ->resize('both') // 'vertical' or 'horizontal'
       ->columnSpan('full');
   

Advanced Patterns

1. Dynamic Profiles Use closures to conditionally set profiles:

   TinyEditor::make('content')
       ->profile(fn () => auth()->user()->isAdmin() ? 'full' : 'simple');
   

2. External Plugins Add third-party TinyMCE plugins (e.g., paste_from_word):

   TinyEditor::make('content')
       ->profile('default')
       ->customConfig([
           'external_plugins' => [
               'paste_from_word' => 'https://unpkg.com/@pangaeatech/tinymce-paste-from-word-plugin@latest/index.js',
           ],
       ]);
   

3. Custom Configs Override TinyMCE defaults (e.g., paste behavior, styles):

   TinyEditor::make('content')
       ->customConfig([
           'paste_webkit_styles' => 'color font-size',
           'content_style' => 'body { font-family: Arial; }',
       ]);
   

4. Livewire Integration For custom Livewire components, manually initialize TinyMCE via JavaScript:

   tinymce.init({
       selector: '#my-custom-editor',
       // ...config
   });
   

   Use the published resources/js/tinyeditor.js as a reference.

Gotchas and Tips

Common Pitfalls

1. Asset Publishing

   • Issue: TinyMCE fails to load or shows errors.
   • Fix: Run php artisan vendor:publish --tag="public" to publish JS/CSS assets.
   • Tip: Clear cached views (php artisan view:clear) if issues persist.

2. File Uploads Not Working

   • Issue: Images/media fail to upload.
   • Debug:
     • Verify fileAttachmentsDisk points to a valid storage disk.
     • Check storage/logs/laravel.log for upload errors.
     • Ensure the upload directory exists (e.g., storage/app/public/uploads).
   • Fix:

     // In config/filament-tinyeditor.php
     'upload_directory' => 'uploads',
     

3. Profile Not Applying

   • Issue: Custom profile settings are ignored.
   • Debug: Check config/filament-tinyeditor.php for typos in profile names.
   • Fix: Use ->profile('custom') with a valid key from the config.

4. Modal Overlap Conflicts

   • Issue: TinyMCE modal overlaps with other modals.
   • Fix: Use ->resize('vertical') or adjust Filament’s modal stack order.

5. PHP Version Mismatch

   • Issue: Package requires PHP 8.2+ (for v5.x).
   • Fix: Update your Laravel/PHP version or use ^4.0 for Filament 4.

Debugging Tips

• Console Logs: TinyMCE emits errors to the browser console. Check for missing plugins or config issues.
• Network Tab: Verify JS/CSS assets are loading (e.g., vendor/amidesfahani/filament-tinyeditor/dist/tinymce.min.js).
• TinyMCE API: Use tinymce.get('editor-id').settings in browser console to inspect runtime config.

Extension Points

1. Custom Plugins Extend TinyMCE by adding plugins to the external_plugins config array (see TinyMCE Plugin Docs).

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

   tinymce.init({
       selector: '#editor',
       setup: (editor) => {
           editor.on('change', () => {
               console.log('Content changed!');
           });
       },
   });
   

3. Theming Override TinyMCE’s CSS by publishing the views tag and modifying resources/views/vendor/filament-tinyeditor/tiny-editor.blade.php.

4. API Keys For commercial TinyMCE features, add your license key to config/filament-tinyeditor.php:

   'license_key' => env('TINYMCE_LICENSE_KEY'),
   

Performance Tips

• Lazy Loading: Use ->profile('minimal') for forms where rich editing isn’t critical.
• Asset Versioning: TinyMCE’s JS/CSS are versioned. Clear cache if updates don’t reflect:

  php artisan cache:clear
  php artisan view:clear