Filament Forms TinyEditor

Filament Forms TinyEditor is a package for Laravel Filament that wraps TinyMce Editor into a usable component. It's works with Filament Forms standalone too.

Light mode | Dark mode :-----------------------------------:|:-----------------------------------: |

Installation

You can install the package via composer:

composer require mohamedsabil83/filament-forms-tinyeditor

Next, publish the asset by run the following:

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

Upgrade

Sometimes, you may need to re-publish and override the assets after upgrading:

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

Usage

use Mohamedsabil83\FilamentFormsTinyeditor\Components\TinyEditor;

TinyEditor::make('content')

Customiziation

There is some customization that can be applied to the editor.

Simple editor

To use a predefined simple editor, you may use the simple() method:

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

Toolbar

You can add many editors with differnt toolbars for each of them. First, publish the configuration files:

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

Each profile looks like the following: (You can add as many you want):

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

Then, use each of the profile when adding editor:

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

For more information about available plugins and toolbar buttons, visit the related page on the TinyMCE site.

Custom TinyMCE Config

By default, tinymce initialized with necessary configs, but if you want to add your config for example image_advtab: true (image_advtab@TinyMce Docs) you can use custom_configs key inside laravel configuration file

You need to convert tinymce json to php array.

Eg. image_advtab: true to 'image_advtab' => true.

Eg.

image_class_list: [
    {title: 'None', value: ''},
    {title: 'Fluid', value: 'img-fluid'},
]

to

'image_class_list' => [
    [
        'title' => 'None',
        'value' => '',
    ],
    [
        'title' => 'Fluid',
        'value' => 'img-fluid',
    ]
]

There is no restriction of configs, you can add everything in here it will be converted and added to tinymce.init() function

// config/filament-forms-tinyeditor.php

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

Will be converted and added to javascript directly.

tinymce.init({
    //... all other things
    "image_advtab": true
})

Editor Height

By default, the editor will automatically resizes to match the content inside it. If you need to control the height of the editor you can use ->minHeight(int) method to set the minimum height and ->maxHeight(int) method to set the maximum height.

TinyEditor::make('content')->minHeight(300)

TinyEditor::make('content')->maxHeight(300)

Show menubar

To show the menubar of the editor, use the ->showMenuBar() method:

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

Localization

By default, toolbar button labels shown same as current laravel locale. To force editor to use a specific language, you can use tge ->language() method:

TinyEditor::make('content')->language('ar')

You can found here a list of all available languages.

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

• MohamedSabil83
• All Contributors

License

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