Filament TinyMCE Editor

A powerful and flexible TinyMCE rich text editor field for Filament v3, featuring comprehensive customization options, image uploads, dark mode support, and multiple editor profiles.

Features

• 🎨 Full TinyMCE 6 Integration - Complete access to TinyMCE's powerful editing capabilities
• 🌓 Dark Mode Support - Seamless theme switching that follows Filament's theme
• 📸 Image Upload - Built-in image upload with configurable storage options
• ⚙️ Highly Customizable - Configure plugins, toolbar, and initialization options
• 📱 Responsive Design - Mobile-optimized editor configuration
• 🚀 Multiple Profiles - Pre-configured editor profiles (simple, standard, full)
• 🔒 Secure - Built-in CSRF protection and authentication checks for uploads
• 🎯 PHP 8.3 Optimized - Leveraging modern PHP features for better performance

Requirements

• PHP ^8.3
• Laravel ^11.0
• Filament ^3.2

Installation

You can install the package via composer:

composer require iamgerwin/filament-tinymce

Publish the configuration file:

php artisan vendor:publish --tag="filament-tinymce-config"

Optionally, publish the assets:

php artisan vendor:publish --tag="filament-tinymce-assets"

Configuration

TinyMCE API Key

To use TinyMCE cloud, add your API key to your .env file:

TINYMCE_API_KEY=your-api-key-here
TINYMCE_CLOUD_CHANNEL=6

You can get a free API key from TinyMCE.

Configuration File

The configuration file config/filament-tinymce.php provides extensive customization options:

return [
    'api_key' => env('TINYMCE_API_KEY', ''),
    'cloud_channel' => env('TINYMCE_CLOUD_CHANNEL', '6'),
    'show_menu_bar' => false,
    'min_height' => 256,
    'max_height' => 0, // 0 = no limit

    'plugins' => [
        'advlist', 'anchor', 'autolink', 'autoresize', 'autosave',
        'charmap', 'code', 'codesample', 'directionality', 'emoticons',
        'fullscreen', 'help', 'image', 'insertdatetime', 'link',
        'lists', 'media', 'pagebreak', 'preview', 'quickbars',
        'searchreplace', 'table', 'visualblocks', 'visualchars', 'wordcount'
    ],

    'toolbar' => [
        'undo redo restoredraft | styles | bold italic underline strikethrough',
        'alignleft aligncenter alignright alignjustify | outdent indent',
        'blocks fontfamily fontsize | forecolor backcolor',
        'bullist numlist | link image media table | code fullscreen preview'
    ],

    'upload_images' => [
        'enabled' => false,
        'disk' => 'public',
        'folder' => 'images',
        'max_size' => 2048, // in KB
    ],

    // Pre-configured profiles
    'profiles' => [
        'simple' => [...],
        'standard' => [...],
        'full' => [...]
    ]
];

Usage

Basic Usage

use Iamgerwin\FilamentTinymce\Forms\Components\TinymceEditor;

TinymceEditor::make('content')
    ->label('Content')
    ->required()

Simple Profile

For basic text editing needs:

TinymceEditor::make('description')
    ->simple()

With Image Uploads

Enable image uploads with custom configuration:

TinymceEditor::make('content')
    ->uploadImages()
    ->uploadDisk('s3')
    ->uploadDirectory('blog/images')
    ->uploadMaxSize(4096) // 4MB

Custom Toolbar and Plugins

TinymceEditor::make('content')
    ->plugins(['link', 'image', 'code', 'table'])
    ->toolbar([
        'undo redo | bold italic underline',
        'link image table | code'
    ])
    ->showMenuBar()

Height Configuration

TinymceEditor::make('content')
    ->minHeight(400)
    ->maxHeight(800)

Advanced Configuration

TinymceEditor::make('content')
    ->apiKey('your-custom-api-key')
    ->cloudChannel('7')
    ->init([
        'branding' => false,
        'promotion' => false,
        'browser_spellcheck' => true,
        'paste_as_text' => true,
        'autosave_interval' => '30s',
        'autosave_retention' => '60m',
        'content_style' => 'body { font-family: Arial; font-size: 16px; }'
    ])

Using in Resource Forms

namespace App\Filament\Resources\PostResource\Pages;

use App\Filament\Resources\PostResource;
use Filament\Resources\Pages\CreateRecord;
use Iamgerwin\FilamentTinymce\Forms\Components\TinymceEditor;

class CreatePost extends CreateRecord
{
    protected static string $resource = PostResource::class;

    protected function getFormSchema(): array
    {
        return [
            Forms\Components\TextInput::make('title')
                ->required()
                ->maxLength(255),

            TinymceEditor::make('content')
                ->label('Post Content')
                ->required()
                ->uploadImages()
                ->uploadDirectory('posts/' . date('Y/m'))
                ->minHeight(500),

            Forms\Components\Toggle::make('is_published')
                ->label('Publish immediately')
        ];
    }
}

Validation

The field works seamlessly with Laravel's validation rules:

TinymceEditor::make('content')
    ->required()
    ->minLength(100)
    ->maxLength(5000)
    ->rules(['string', 'max:5000'])

Read-only and Disabled States

TinymceEditor::make('content')
    ->disabled()
    // or
    ->readonly()
    // or conditionally
    ->disabled(fn () => ! auth()->user()->isAdmin())

Advanced Features

Dark Mode Support

The editor automatically adapts to Filament's dark mode. No additional configuration needed.

Autosave

Configure autosave functionality:

TinymceEditor::make('content')
    ->init([
        'autosave_interval' => '20s',
        'autosave_retention' => '30m',
        'autosave_restore_when_empty' => true,
    ])

Custom CSS Styling

Apply custom styles to the editor content:

TinymceEditor::make('content')
    ->init([
        'content_style' => '
            body {
                font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
                line-height: 1.6;
                color: #333;
            }
            h1 { color: #2563eb; }
            blockquote {
                border-left: 4px solid #e5e7eb;
                padding-left: 1rem;
                color: #6b7280;
            }
        '
    ])

Mobile Configuration

Different configuration for mobile devices:

TinymceEditor::make('content')
    ->init([
        'mobile' => [
            'menubar' => false,
            'plugins' => 'autosave lists link image',
            'toolbar' => 'undo bold italic styles link image',
        ]
    ])

Image Upload Security

When enabling image uploads, the package includes:

• File type validation (images only)
• File size validation
• Automatic file name sanitization
• CSRF protection
• Authentication checks

Configure in your config/filament-tinymce.php:

'upload_images' => [
    'enabled' => true,
    'disk' => 's3', // or 'local', 'public'
    'folder' => 'uploads/tinymce',
    'max_size' => 2048, // KB
],

Testing

Run the test suite:

composer test

Run tests with coverage:

composer test-coverage

Run PHPStan analysis:

./vendor/bin/phpstan analyse

Format code with Pint:

composer format

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

Please review our security policy on how to report security vulnerabilities.

Credits

• iamgerwin
• All Contributors

This package is inspired by Nova4-TinymceEditor and uses the Spatie Laravel Package Skeleton.

License

The MIT License (MIT). Please see License File for more information.