michielkempen/nova-froala-field

一个用于 Laravel Nova 的 Froala WYSIWYG 编辑器字段。

4.0.0 2023-03-06 19:07 UTC

README

Nova Froala Field

Froala WYSIWYG 编辑器 字段,适用于 Laravel Nova

Latest Version on Packagist Build Status Code Style Status Total Downloads

简介

Froala WYSIWYG 编辑器字段

完全支持附件图片、文件和视频的附加

Form Field

对于 Froala 事件的提示由 Toasted 处理,这是 Nova 默认提供的。

升级

要升级到 Froala 3,请查看 – 升级说明

安装

您可以通过 composer 将此包安装到使用 Nova 的 Laravel 应用程序中

composer require michielkempen/nova-froala-field

使用方法

只需在您的 Nova 资源中使用 MichielKempen\NovaFroalaField\Froala 字段即可

namespace App\Nova;

use MichielKempen\NovaFroalaField\Froala;

class Article extends Resource
{
    // ...

    public function fields(Request $request)
    {
        return [
            // ...

            Froala::make('Content'),

            // ...
        ];
    }
}

覆盖配置值

要更改 froala 字段的所有配置值,请发布一个配置文件

php artisan vendor:publish --tag=config --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider

自定义编辑器选项

要更改任何 可用的 Froala 选项,编辑 nova.froala-field.options 的值

/*
|--------------------------------------------------------------------------
| Default Editor Options
|--------------------------------------------------------------------------
|
| Setup default values for any Froala editor option.
|
| To view a list of all available options check out the Froala documentation
| {@link https://www.froala.com/wysiwyg-editor/docs/options}
|
*/

'options' => [
    'toolbarButtons' => [
        [
            'bold',
            'italic',
            'underline',
        ],
        [
            'formatOL',
            'formatUL',
        ],
        [
            'insertImage',
            'insertFile',
            'insertLink',
            'insertVideo',
        ],
        [
            'embedly',
            'html',
        ],
    ],
],

//...

如果您只想将选项应用于特定字段,请将它们传递给 options 方法

public function fields(Request $request)
{
    return [
        // ...

        Froala::make('Content')->options([
            'editorClass' => 'custom-class',
            'height' => 300,
        ]),

        // ...
    ];
}

附件

Nova Froala 字段 提供了本地附件驱动程序,它的工作方式类似于 Trix 文件上传,但具有优化图像和保留文件名的能力。您还可以切换到 trix 驱动程序以使用其上传系统。

  • 建议使用 froala 驱动程序(默认启用)以使用 Froala 提供的当前和未来附加功能。

Froala 驱动程序

要使用 froala 驱动程序,发布并运行迁移

php artisan vendor:publish --tag=migrations --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider 
php artisan migrate

Trix 驱动程序

如果您之前已经使用了 Trix 附件并且想保留与相同表和处理程序相同的行为,您可以在配置文件中使用 trix 驱动程序

/*
|--------------------------------------------------------------------------
| Editor Attachments Driver
|--------------------------------------------------------------------------
|
| If you have used `Trix` previously and want to save the same flow with
| `Trix` attachments handlers and database tables you can use
| "trix" driver.
|
| *** Note that "trix" driver doesn't support image optimization
| and file names preservation.
|
| It is recommended to use "froala" driver to be able to automatically
| optimize uploaded images and preserve attachments file names.
|
| Supported: "froala", "trix"
|
*/

'attachments_driver' => 'trix'

//...

附件使用方法

要允许用户上传图片、文件和视频,就像 Trix 字段一样,将 withFiles 方法链接到字段的定义。在调用 withFiles 方法时,您应传递应存储照片的文件系统磁盘的名称

use MichielKempen\NovaFroalaField\Froala;

Froala::make('Content')->withFiles('public');

此外,在您的 app/Console/Kernel.php 文件中,您应注册一个 每日作业,以从待处理附件表和存储中删除任何过时的附件

use MichielKempen\NovaFroalaField\Jobs\PruneStaleAttachments;


/**
* Define the application's command schedule.
*
* @param  \Illuminate\Console\Scheduling\Schedule  $schedule
* @return void
*/
protected function schedule(Schedule $schedule)
{
    $schedule->call(function () {
        (new PruneStaleAttachments)();
    })->daily();
}

文件名保留

默认情况下,根据 store 方法规范 生成一个唯一的 ID,用作文件名。如果您想保留上传附件的原始客户端文件名,请将配置文件中的 preserve_file_names 选项更改为 true

/*
|--------------------------------------------------------------------------
| Preserve Attachments File Name
|--------------------------------------------------------------------------
|
| Ability to preserve client original file name for uploaded
| image, file or video.
|
*/

'preserve_file_names' => true,

//...

图像优化

默认情况下,所有上传的图像都将由 spatie/image-optimizer 进行优化。

您可以在配置文件中禁用图像优化

/*
|--------------------------------------------------------------------------
| Automatically Images Optimization
|--------------------------------------------------------------------------
|
| Optimize all uploaded images by default.
|
*/

'optimize_images' => false,

//...

或为任何优化器设置自定义优化选项

/*
|--------------------------------------------------------------------------
| Image Optimizers Setup
|--------------------------------------------------------------------------
|
| These are the optimizers that will be used by default.
| You can setup custom parameters for each optimizer.
|
*/

'image_optimizers' => [
    Spatie\ImageOptimizer\Optimizers\Jpegoptim::class => [
        '-m85', // this will store the image with 85% quality. This setting seems to satisfy Google's Pagespeed compression rules
        '--strip-all', // this strips out all text information such as comments and EXIF data
        '--all-progressive', // this will make sure the resulting image is a progressive one
    ],
    Spatie\ImageOptimizer\Optimizers\Pngquant::class => [
        '--force', // required parameter for this package
    ],
    Spatie\ImageOptimizer\Optimizers\Optipng::class => [
        '-i0', // this will result in a non-interlaced, progressive scanned image
        '-o2', // this set the optimization level to two (multiple IDAT compression trials)
        '-quiet', // required parameter for this package
    ],
    Spatie\ImageOptimizer\Optimizers\Svgo::class => [
        '--disable=cleanupIDs', // disabling because it is known to cause troubles
    ],
    Spatie\ImageOptimizer\Optimizers\Gifsicle::class => [
        '-b', // required parameter for this package
        '-O3', // this produces the slowest but best results
    ],
],

图像优化目前仅支持本地文件系统

上传最大文件大小

您可以设置附件的最大上传文件大小。如果设置为 null,最大上传文件大小等于 php.iniupload_max_filesize 指令的值。

/*
|--------------------------------------------------------------------------
| Maximum Possible Size for Uploaded Files
|--------------------------------------------------------------------------
|
| Customize max upload filesize for uploaded attachments.
| By default it is set to "null", it means that default value is
| retrieved from `upload_max_size` directive of php.ini file.
|
| Format is the same as for `uploaded_max_size` directive.
| Check out FAQ page, to get more detail description.
| {@link https://php.ac.cn/manual/en/faq.using.php#faq.using.shorthandbytes}
|
*/

'upload_max_filesize' => null,

//...

显示编辑内容

根据 Froala 显示编辑内容 文档,您应发布 Froala 样式

php artisan vendor:publish --tag=froala-styles --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider 

将编辑后的内容包含在视图中显示

<!-- CSS rules for styling the element inside the editor such as p, h1, h2, etc. -->
<link href="{{ asset('css/vendor/froala_styles.min.css') }}" rel="stylesheet" type="text/css" />

此外,您还应该确保将编辑后的内容放在具有 .fr-view 类的元素内部

<div class="fr-view">
    {!! $article->content !!}
</div>

在索引页面上显示

您有在资源索引页面上以弹出窗口显示字段内容的能力

use Froala/NovaFroalaField/Froala;

Froala::make('Content')->showOnIndex();

只需点击 显示内容

Index Field

许可证密钥

要设置您的许可证密钥,在配置文件中取消注释 key 选项,并设置 FROALA_KEY 环境变量

// ...
'options' => [
    'key' => env('FROALA_KEY'),
    // ...
],

第三方集成

要启用使用某些第三方服务并需要包含额外脚本的按钮,例如:Embed.lyTUI Advanced Image EditorSCAYT Web SpellChecker,您应该发布第三方脚本

php artisan vendor:publish --tag=nova-froala-field-plugins --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider

当您启用 embedlyspellChecker 按钮时,脚本将动态导入。

TUI Advanced Image Editor

如果您想使用 TUI Image Editor 来添加高级图像编辑选项,将 tuiEnable 选项切换为 true

'options' => [
    // 'key' => env('FROALA_KEY'),

    // 'tuiEnable' => true,

    //...
],

Font Awesome 5

如果您拥有 Font Awesome Pro 许可证,您可以使用 iconsTemplate 选项启用使用常规图标而不是实心图标。

iconsTemplate 配置值添加到 froala-field.php 配置中

'options' => [
    // 'key' => env('FROALA_KEY'),

   'iconsTemplate' => 'font_awesome_5',
   // If you want to use the regular/light icons, change the template to the following.
   // iconsTemplate: 'font_awesome_5r'
   // iconsTemplate: 'font_awesome_5l'
   
   //...
],

注意:

如果您在加载第三方插件时遇到任何问题,请尝试重新发布它

php artisan vendor:publish --tag=nova-froala-field-plugins --force

高级

自定义事件处理器

如果您想为 froala 编辑器实例设置自定义事件处理器,创建一个 js 文件并将 events 属性分配给 window.froala

window.froala = {
    events: {
        'image.error': (error, response) => {},
        'imageManager.error': (error, response) => {},
        'file.error': (error, response) => {},
    }
};

window.froala.events 中提供的所有回调,VueJS 表单字段组件的上下文将自动应用,您可以在回调中像使用 Vue 实例组件一样使用 this

之后,在 NovaNovaServiceProvider::boot 方法中加载 js 文件

public function boot()
{
    parent::boot();

    Nova::serving(function (ServingNova $event) {
        Nova::script('froala-event-handlers', public_path('path/to/js/file.js'));
    });
}

自定义附件处理器

您可以通过传递一个 callable 来更改任何附件处理器

use App\Nova\Handlers\{
    StorePendingAttachment,
    DetachAttachment,
    DeleteAttachments,
    DiscardPendingAttachments,
    AttachedImagesList
};

Froala::make('Content')
    ->attach(new StorePendingAttachment)
    ->detach(new DetachAttachment)
    ->delete(new DeleteAttachments)
    ->discard(new DiscardPendingAttachments)
    ->images(new AttachedImagesList)

测试

composer test

变更日志

有关最近更改的更多信息,请参阅 CHANGELOG

贡献

有关详细信息,请参阅 CONTRIBUTING

安全

如果您发现任何与安全相关的问题,请通过电子邮件 support@froala.com 反馈,而不是使用问题跟踪器。

鸣谢

许可证

MIT 许可证 (MIT)。有关更多信息,请参阅 许可证文件