thibautgobert/filament-syncfusion-rich-text

适用于 Filament 3 表单的 Syncfusion 富文本字段

维护者

详情

github.com/ThibautGobert/filament-syncfusion-rich-text

主页

源代码

问题

安装: 22

依赖项: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 0

1.0.2 2024-07-28 10:47 UTC

Requires

Requires (Dev)

MIT bef17c8db0a3788ac97cd299e2c5a106f5635952

  • Thibaut Gobert <thibaut.gobert.woop@hotmail.com>

wysiwyglaravelcodemirrorfilamentfilament-code-editorfilament-form-fieldfilament-fieldcode-editorfilament-rich-textfilament-wysiwygfilament-codemirrorrich-text

This package is auto-updated.

Last update: 2024-09-28 11:08:30 UTC

README

Syncfusion 富文本编辑器字段用于 Laravel Filament 表单。

警告

在继续之前，你必须知道 Syncfusion 不是一个免费库，你必须拥有有效许可证才能使用它。
他们还有一个社区许可证。
在此处获取您的许可证
一旦您有了许可证，您就可以在 .env 文件中设置密钥。

SYNCFUSION_LICENSE_KEY=your-license-key

功能

  • 使用 Base64 保存格式选项轻松插入图像
  • 使用 Blob 保存格式选项和您自己的服务器端实现进行高级图像插入
  • 使用 Base64 保存格式选项轻松插入视频
  • 使用 Blob 保存格式选项和您自己的服务器端实现进行高级视频插入
  • 通过 SourceCode 工具栏项实现代码编辑器（Code mirror 6 实现）
  • 通过 FullScreen 工具栏项实现全屏编辑
  • HTML 或 Markdown 模式
  • 支持深色/浅色主题

安装

您可以通过 composer 安装此包

composer require thibautgobert/filament-syncfusion-rich-text

用法

use ThibautGobert\FilamentSyncfusionRichText\SyncfusionRichText;

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

}
可用方法

发布

您可以使用以下方式发布视图

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

您可以使用以下方式发布配置文件

php artisan vendor:publish --tag="syncfusion-rich-text-config"
配置文件
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'],
                ],
            ],
        ],
    ],
];

示例

图像插入（Blob），服务器端实现示例

//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
<?php

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

变更日志

请参阅 CHANGELOG

致谢

许可证

MIT 许可证（MIT）。有关更多信息，请参阅 许可证文件。