PHP code example of thibautgobert / filament-syncfusion-rich-text

1. Go to this page and download the library: Download thibautgobert/filament-syncfusion-rich-text library. Choose the download type require.

2. Extract the ZIP file and open the index.php.

3. Add this code to the index.php.
    
        
<?php
require_once('vendor/autoload.php');

/* Start to develop here. Best regards https://php-download.com/ */

    

thibautgobert / filament-syncfusion-rich-text example snippets


use ThibautGobert\FilamentSyncfusionRichText\SyncfusionRichText;

public function form(Form $form): Form
{
    return $form
        ->schema([
            ...
             SyncfusionRichText::make('content')
                    ->mode('Markdown')
                    ->

return [
    'syncfusionLicenseKey' => env('SYNCFUSION_LICENSE_KEY'),
    /*
     * HTML / Markdown
     */
    'mode' => 'HTML',
    'defaultToolbarItems' => [
        'Bold',
        'Italic',
        'Underline',
        'FontName',
        'FontSize',
        'FontColor',
        'Formats',
        'Alignments',
        'CreateLink',
        '|',
        'Image',
        'Video',
        '|',
        'Undo',
        'Redo',
        'EmojiPicker',
        '|',
        'CreateTable',
        '|',
        'FullScreen',
        'SourceCode'
    ],
    'defaultMarkDownToolbarItems' => [
        'Bold',
        'Italic',
        'StrikeThrough',
        '|',
        'Formats',
        'OrderedList',
        'UnorderedList',
        '|',
        'CreateLink',
        'Image',
        '|',
        'Undo',
        'Redo',
        '|',
        'CreateTable'
    ],
    'insertImageSettings' => [
        'allowedTypes' =>  [".jpeg", ".jpg", ".png"],
        'display' => 'inline',
        'width' => 'auto',
        'height' => 'auto',
        /*
         * Base64 / Blob
         */
        'saveFormat' => 'Base64',
        'saveUrl' => null,
        'path' => null,
        'serverSideImageResponseName' => 'imageName',
        'deleteUrl' => null,
    ],
    'insertVideoSettings' => [
        'allowedTypes' => ['.mp4', '.mov', '.wmv', '.avi'],
        /*
         *  Inline / Break
         */
        'layoutOption' => 'Inline',
        'width' => 'auto',
        'minWidth' => null,
        'maxWidth' => null,
        'height' => 'auto',
        'minHeight' => null,
        'maxHeight' => null,
        /*
         * Base64 / Blob
         */
        'saveFormat' => 'Base64',
        'saveUrl' => null,
        'removeUrl' => null,
        'path' => null,
        'serverSideVideoResponseName' => 'videoName',
    ],
    'emojiPickerSettings' => [
        'iconsSet' => [
            [
                'name' => 'Smilies & People',
                'code' => '1F600',
                'iconCss' => 'e-emoji',
                'icons' => [
                    ['code' => '1F600', 'desc' => 'Grinning face'],
                    ['code' => '1F603', 'desc' => 'Grinning face with big eyes'],
                    ['code' => '1F604', 'desc' => 'Grinning face with smiling eyes'],
                    ['code' => '1F606', 'desc' => 'Grinning squinting face'],
                    ['code' => '1F605', 'desc' => 'Grinning face with sweat'],
                    ['code' => '1F602', 'desc' => 'Face with tears of joy'],
                    ['code' => '1F923', 'desc' => 'Rolling on the floor laughing'],
                    ['code' => '1F60A', 'desc' => 'Smiling face with smiling eyes'],
                    ['code' => '1F609', 'desc' => 'Winking face'],
                    ['code' => '1F60D', 'desc' => 'Smiling face with heart-eyes'],
                    ['code' => '1F618', 'desc' => 'Face blowing a kiss'],
                    ['code' => '1F61A', 'desc' => 'Kissing face with closed eyes'],
                    ['code' => '1F617', 'desc' => 'Kissing face'],
                    ['code' => '1F619', 'desc' => 'Kissing face with smiling eyes'],
                    ['code' => '1F61B', 'desc' => 'Face with stuck-out tongue'],
                    ['code' => '1F61C', 'desc' => 'Winking face with tongue'],
                    ['code' => '1F92A', 'desc' => 'Zany face'],
                    ['code' => '1F61D', 'desc' => 'Squinting face with tongue'],
                    ['code' => '1F911', 'desc' => 'Money-mouth face'],
                    ['code' => '1F917', 'desc' => 'Hugging face'],
                    ['code' => '1F92D', 'desc' => 'Face with hand over mouth'],
                    ['code' => '1F92B', 'desc' => 'Shushing face'],
                    ['code' => '1F914', 'desc' => 'Thinking face'],
                    ['code' => '1F910', 'desc' => 'Zipper-mouth face'],
                    ['code' => '1F928', 'desc' => 'Face with raised eyebrow'],
                    ['code' => '1F610', 'desc' => 'Neutral face'],
                    ['code' => '1F611', 'desc' => 'Expressionless face'],
                    ['code' => '1F636', 'desc' => 'Face without mouth'],
                    ['code' => '1F60F', 'desc' => 'Smirking face'],
                    ['code' => '1F612', 'desc' => 'Unamused face'],
                    ['code' => '1F644', 'desc' => 'Face with rolling eyes'],
                    ['code' => '1F62C', 'desc' => 'Grimacing face'],
                    ['code' => '1F925', 'desc' => 'Lying face'],
                    ['code' => '1F60C', 'desc' => 'Relieved face'],
                    ['code' => '1F614', 'desc' => 'Pensive face'],
                    ['code' => '1F62A', 'desc' => 'Sleepy face'],
                    ['code' => '1F924', 'desc' => 'Drooling face'],
                    ['code' => '1F634', 'desc' => 'Sleeping face'],
                    ['code' => '1F637', 'desc' => 'Face with medical mask'],
                    ['code' => '1F638', 'desc' => 'Grinning cat face with smiling eyes'],
                    ['code' => '1F639', 'desc' => 'Cat face with tears of joy'],
                    ['code' => '1F63A', 'desc' => 'Smiling cat face with open mouth'],
                    ['code' => '1F63B', 'desc' => 'Smiling cat face with heart-eyes'],
                    ['code' => '1F92E', 'desc' => 'Face vomiting']
                ],
            ],
            [
                'name' => 'Animals & Nature',
                'code' => '1F435',
                'iconCss' => 'e-animals',
                'icons' => [
                    ['code' => '1F436', 'desc' => 'Dog face'],
                    ['code' => '1F431', 'desc' => 'Cat face'],
                    ['code' => '1F42D', 'desc' => 'Mouse face'],
                    ['code' => '1F439', 'desc' => 'Hamster face'],
                    ['code' => '1F430', 'desc' => 'Rabbit face'],
                    ['code' => '1F98A', 'desc' => 'Fox face'],
                ],
            ],
            [
                'name' => 'Food & Drink',
                'code' => '1F347',
                'iconCss' => 'e-food-and-drinks',
                'icons' => [
                    ['code' => '1F34E', 'desc' => 'Red apple'],
                    ['code' => '1F34C', 'desc' => 'Banana'],
                    ['code' => '1F347', 'desc' => 'Grapes'],
                    ['code' => '1F353', 'desc' => 'Strawberry'],
                    ['code' => '1F35E', 'desc' => 'Bread'],
                    ['code' => '1F950', 'desc' => 'Croissant'],
                    ['code' => '1F955', 'desc' => 'Carrot'],
                    ['code' => '1F354', 'desc' => 'Hamburger'],
                ],
            ],
            [
                'name' => 'Activities',
                'code' => '1F383',
                'iconCss' => 'e-activities',
                'icons' => [
                    ['code' => '26BD', 'desc' => 'Soccer ball'],
                    ['code' => '1F3C0', 'desc' => 'Basketball'],
                    ['code' => '1F3C8', 'desc' => 'American football'],
                    ['code' => '26BE', 'desc' => 'Baseball'],
                    ['code' => '1F3BE', 'desc' => 'Tennis'],
                    ['code' => '1F3D0', 'desc' => 'Volleyball'],
                    ['code' => '1F3C9', 'desc' => 'Rugby football'],
                ],
            ],
            [
                'name' => 'Travel & Places',
                'code' => '1F30D',
                'iconCss' => 'e-travel-and-places',
                'icons' => [
                    ['code' => '2708', 'desc' => 'Airplane'],
                    ['code' => '1F697', 'desc' => 'Automobile'],
                    ['code' => '1F695', 'desc' => 'Taxi'],
                    ['code' => '1F6B2', 'desc' => 'Bicycle'],
                    ['code' => '1F68C', 'desc' => 'Bus'],
                ],
            ],
            [
                'name' => 'Objects',
                'code' => '1F507',
                'iconCss' => 'e-objects',
                'icons' => [
                    ['code' => '1F4A1', 'desc' => 'Light bulb'],
                    ['code' => '1F526', 'desc' => 'Flashlight'],
                    ['code' => '1F4BB', 'desc' => 'Laptop computer'],
                    ['code' => '1F5A5', 'desc' => 'Desktop computer'],
                    ['code' => '1F5A8', 'desc' => 'Printer'],
                    ['code' => '1F4F7', 'desc' => 'Camera'],
                    ['code' => '1F4F8', 'desc' => 'Camera with flash'],
                    ['code' => '1F4FD', 'desc' => 'Film projector'],
                ],
            ],
            [
                'name' => 'Symbols',
                'code' => '1F3E7',
                'iconCss' => 'e-symbols',
                'icons' => [
                    ['code' => '274C', 'desc' => 'Cross mark'],
                    ['code' => '2714', 'desc' => 'Check mark'],
                    ['code' => '26A0', 'desc' => 'Warning sign'],
                    ['code' => '1F6AB', 'desc' => 'Prohibited'],
                    ['code' => '2139', 'desc' => 'Information'],
                    ['code' => '267B', 'desc' => 'Recycling symbol'],
                    ['code' => '1F6AD', 'desc' => 'No smoking'],
                ],
            ],
        ],
    ],
];

//config file
'insertImageSettings' => [
        'allowedTypes' =>  [".jpeg", ".jpg", ".png"],
        'display' => 'inline',
        'width' => 'auto',
        'height' => 'auto',
        /*
         * Base64 / Blob
         */
        'saveFormat' => 'Blob',
        'saveUrl' => '/admin/image/save',
        'path' => '/storage/images/rich-text/',
        'serverSideImageResponseName' => 'imageName',
        'deleteUrl' => '/admin/image/remove',

    ],

//routes


use App\Http\Controllers\Admin\ImageController;
use Illuminate\Support\Facades\Route;

Route::group(['prefix' => 'admin/image'], function () {
    Route::post('save', [ImageController::class, 'save']);
    Route::post('remove', [ImageController::class, 'remove']);
});


//controller
class ImageController extends Controller
{
    public function save(Request $request)
    {
        $path = Storage::disk('public')->putFile('images/rich-text', $request->file('UploadFiles'));
        $fileName = basename($path);

        return response()->json([
            // the key must match serverSideImageResponseName from the config file
            'imageName' => $fileName,
        ]);
    }

    public function remove(Request $request)
    {
        Storage::disk('public')->delete(str_replace('/storage', '', $request->input('url')));
        return response()->json('ok');
    }
}

bash
php artisan vendor:publish --tag="syncfusion-rich-text-views"
bash
php artisan vendor:publish --tag="syncfusion-rich-text-config"