README

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

License

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

haosheng0211 / filament-forms-tinymce

Maintainers

Package info

Statistics

Security