README

Froala WYSIWYG 编辑器 字段用于 Laravel Nova

简介

Froala WYSIWYG 编辑器字段

全面支持附件图像、文件和视频

Froala 事件的通知由 Toasted 处理，这是 Nova 默认提供的。

升级

要升级到 Froala 3，请参阅 – 升级说明。

安装

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

composer require froala/nova-froala-field

使用

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

namespace App\Nova;

use Froala\NovaFroalaField\Froala;

class Article extends Resource
{
    // ...

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

            Froala::make('Content'),

            // ...
        ];
    }
}

覆盖配置值

要更改 froala 字段 的任何配置值，请发布一个配置文件

php artisan vendor:publish --tag=config --provider=Froala\\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=Froala\\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 Froala\NovaFroalaField\Froala;

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

此外，在您的 app/Console/Kernel.php 文件中，您应该注册一个每日作业，以从挂起的附件表和存储中修剪任何陈旧的附件

use Froala\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.ini中upload_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=Froala\\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();

只需单击显示内容

许可密钥

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

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

第三方集成

要启用使用某些第三方服务并需要包括额外脚本的按钮，例如：Embed.ly、TUI Advanced Image Editor或SCAYT Web SpellChecker，您应该发布第三方脚本

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

脚本将在您启用embedly或spellChecker按钮时动态导入。

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表单字段组件的上下文会自动应用，您可以在回调中使用this，就像使用Vue实例组件一样。

之后，在Nova脚本中的NovaServiceProvider::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）。有关更多信息，请参阅许可证文件

yehia-abdullah / nova-froala-field

维护者

详细信息