usage-and-customization.md

title
Usage & Customization

Usage

use Mohamedsabil83\FilamentFormsTinyeditor\Components\TinyEditor;

TinyEditor::make('content')

Customization

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
})

Image Upload

You can customize how the image plugin handles uploads using the methods associated with the HasFileAttachments trait. This measns you can specify the storage disk driver, directory and image visibility easily using methods directly on the field component.

TinyEditor::make('content')->fileAttachmentsDisk('local')->fileAttachmentsVisibility('public')->fileAttachmentsDirectory('uploads'),

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()

Sticky menubar

To sticky the menubar of the editor, use the ->toolbarSticky() method:

TinyEditor::make('content')->toolbarSticky(true)

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.