Filament Forms TinyEditor

Filament Forms TinyEditor is a package for Laravel Filament that integrates the TinyMCE Editor into Filament Forms. It can be used within Filament admin panels or as a standalone component for Filament Forms.

WARNING

Deprecation Notice: This project is no longer actively maintained. For an actively supported alternative, consider using amidesfahani/filament-tinyeditor.

Install the package using Composer to add it to your project dependencies.

composer require mohamedsabil83/filament-forms-tinyeditor

If you are using Filament with Forms standalone (rather than the full Filament panel), you must run the following command to ensure the necessary assets are available:

php artisan filament:assets

To customize the TinyEditor settings, publish the configuration file using the following command:

php artisan vendor:publish --tag="filament-forms-tinyeditor-config"

To create custom editor profiles with specific plugins and toolbars, follow these steps:

1. Publish the configuration file:

   php artisan vendor:publish --tag="filament-forms-tinyeditor-config"

2. Define your profiles in the published config file (e.g., config/filament-forms-tinyeditor.php). Each profile is an array containing plugins and toolbar keys:

   'simple' => [
       'plugins' => 'directionality emoticons link wordcount',
       'toolbar' => 'removeformat | bold italic | rtl ltr | link emoticons',
   ],

3. Apply the profile to your component using the profile() method:

   TinyEditor::make('content')->profile('your-profile-name')

To add the TinyEditor component to a Filament form, import the TinyEditor class and use the make() method with your database column name.

use Mohamedsabil83\\\nFilamentFormsTinyeditor\\Components\\TinyEditor;

TinyEditor::make('content')

Version 2.x switched from a local TinyMCE installation to a CDN-based version. To upgrade successfully:

1. Delete the old local files by removing the directory: public/vendor/filament-forms-tinyeditor.
2. Upgrade the package via Composer.
3. If using Forms standalone, run php artisan filament:assets to refresh assets.

# 1. Remove old directory
rm -rf public/vendor/filament-forms-tinyeditor

# 2. Upgrade (via composer)
composer require mohamedsabil83/filament-forms-tinyeditor

# 3. Refresh assets (if using Forms standalone)
php artisan filament:assets

To ensure that images uploaded via TinyEditor are visible in your application, you may need to create the storage link:

php artisan storage:link

The TinyEditor component uses a profile system to manage complex configurations. When you call profile('name'), the component looks up settings in the filament-forms-tinyeditor.profiles.{name} configuration section.

This profile determines:

• Plugins: The list of TinyMCE plugins to load.
• Toolbar: The string defining the toolbar buttons.
• Custom Configs: Additional TinyMCE configuration options.
• Upload Directory: The directory used for file attachments via getFileAttachmentsDirectory().

If simple() is called, it overrides the profile's plugins and toolbar with a minimal set. If no profile is specified, it defaults to the default profile.

You can inject arbitrary TinyMCE configuration options via the custom_configs key within a profile in your Laravel configuration file. Note that you must convert TinyMCE's JSON format into PHP arrays.

Example of adding image_advtab to a profile:

// config/filament-forms-tinyeditor.php

'simple' => [
    'plugins' => 'directionality emoticons link wordcount',
    'toolbar' => 'removeformat | bold italic | rtl ltr | link emoticons',
    'custom_configs' => [
        'image_advtab' => true
    ]
],

You can quickly apply a predefined, simplified editor configuration by calling the simple() method on the component.

TinyEditor::make('content')->simple()