Filament Forms TinyMCE

A Filament v3 form field that integrates TinyMCE 8 rich text editor.

Requirements

• PHP ^8.2
• Laravel ^10.0 / ^11.0 / ^12.0
• Filament ^3.0

Installation

composer require haosheng0211/filament-forms-tinymce

Publish the config file:

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

Usage

Basic

use MrJin\FilamentFormsTinymce\TinyMceEditor;

TinyMceEditor::make('content')

Profiles

Profiles let you define reusable editor presets in the config file. Three built-in profiles are provided: default, simple, and full.

TinyMceEditor::make('content')
    ->profile('simple')

Define your own profiles in the config:

// config/filament-forms-tinymce.php

'profiles' => [
    'blog' => [
        'plugins' => 'lists link image media code',
        'toolbar' => 'blocks | bold italic | link image media | code',
        'menubar' => false,
        'height' => 500,
    ],
],

Priority order: instance method > profile > TinyMCE built-in default

// Profile sets height to 500, but this instance overrides it to 800
TinyMceEditor::make('content')
    ->profile('blog')
    ->height(800)

Editor options

All TinyMCE options can also be set directly via fluent methods without using profiles:

TinyMceEditor::make('content')
    ->toolbar('bold italic underline | bullist numlist | link image media')
    ->plugins('lists link image media table code')
    ->menubar('file edit view insert format')
    ->height(500)
    ->language('zh_TW')
    ->skin('oxide-dark')
    ->contentCss('dark')

For any TinyMCE init option not covered by a dedicated method, use options():

TinyMceEditor::make('content')
    ->options([
        'branding' => false,
        'resize' => true,
        'paste_as_text' => true,
    ])

File browser

The file browser integration is enabled by default. When enabled, TinyMCE's file_picker_callback dispatches Livewire events (open-media-browser / media-selected) so you can connect your own media browser component.

Tip: You can use the suggested package haosheng0211/filament-media-browser which provides a ready-made Livewire media browser that listens for these events.

Disable file browser

TinyMceEditor::make('content')
    ->fileBrowser(false)

Media disk & directory

You can specify the disk and directory to pass to the media browser:

TinyMceEditor::make('content')
    ->mediaDisk('s3')
    ->mediaDirectory('uploads/articles')

TinyMCE source

TinyMCE is loaded from jsDelivr CDN with SRI integrity check. No API key required.

You can customise the CDN URL and version in the config:

'cdn_url' => 'https://cdn.jsdelivr.net/npm/tinymce@{version}/tinymce.min.js',
'version' => '8.3.2',

Config reference

return [
    'cdn_url' => 'https://cdn.jsdelivr.net/npm/tinymce@{version}/tinymce.min.js',
    'version' => '8.3.2',

    // SRI hash for CDN (set to null to disable)
    'integrity' => 'sha384-...',
    'crossorigin' => 'anonymous',

    // Profiles (pre-defined editor configurations)
    'profiles' => [
        'default' => [
            'plugins' => 'lists link image media table code wordcount',
            'toolbar' => 'undo redo | blocks | bold italic underline strikethrough | ...',
            'menubar' => false,
            'height' => 480,
        ],
        'simple' => [
            'plugins' => 'lists link',
            'toolbar' => 'bold italic underline | bullist numlist | link | removeformat',
            'menubar' => false,
            'height' => 300,
        ],
        'full' => [
            'plugins' => 'lists link image media table code wordcount fullscreen searchreplace visualblocks',
            'toolbar' => 'undo redo | blocks fontfamily fontsize | ...',
            'menubar' => 'file edit view insert format tools table',
            'height' => 600,
            'custom_configs' => [],
        ],
    ],
];

Testing

composer test

Changelog

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

Security Vulnerabilities

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

Credits

• Mr.Jin
• All Contributors

License

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