README

截至2022年10月，我们已决定从 Froala 迁移。Froala 仍未提供迁移到 Vue3 的具体计划。没有 Vue3，我们无法迁移到 Nova 4，因此我们决定迁移到另一个编辑器。

如果您想继续更新它，请随意复制此存储库。

Froala WYSIWYG 编辑器字段用于 Laravel Nova

简介

这是原始 froala/nova-froala-field 存储库的分支。原始存储库不再维护。我创建此分支是因为我们的公司需要一个在 Nova 中工作的 Froala 版本。此分支包含 Froala (v4) 的更新版本，**不**支持第三方插件（您可以在此处阅读为什么）。

从 v3 升级到 v4

此版本有一些新的最低要求

PHP ^8.0
laravel/framework ^9.0
laravel/nova ^3.0
league/flysystem ^3.0 (默认与 Laravel 9 一起使用)

如果您之前使用的是 Froala 的旧版本，可以在您的 composer.json 中将 "froala/nova-froala-field": "^3.x" 替换为 "pathfindermediagroup/nova-froala-field": "^4.0"。只需确保像这样强制发布新资源

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

您还可以从您的项目中删除 public/vendor/nova/froala 文件夹，因为它不再需要或受支持。

Froala WYSIWYG 编辑器字段

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

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

安装

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

composer require pathfindermediagroup/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 field 的任何配置值，发布一个配置文件

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',
        ],
        [
            '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'),
    // ...
],

第三方集成

我决定移除第三方集成，如embedly和Tui。这样做的原因是我想在Nova中使用Froala的更新版本。我无法使其与第三方集成正常工作。我不使用它们，因此我不倾向于花费更多时间尝试使它们工作。如果你知道如何做，请随意创建一个pull request。

高级

自定义事件处理器

如果你想要为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文件加载到Nova脚本中

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 install
yarn install

修复代码风格

PHP

composer cgl

yarn format

测试

composer test

构建开发资源

yarn dev

构建生产资源

yarn prod

贡献

要贡献，只需将你的更改作为一个pull request提交到这个存储库。确保你的pull request描述中有良好的文档。

鸣谢

Slava Razum 为创建原始插件
Woeler 为将弃用的插件更新到Froala版本4，Laravel版本9和Mix版本6
所有贡献者

许可证

MIT许可证（MIT）。请参阅许可证文件获取更多信息。

pathfindermediagroup / nova-froala-field

维护者

详细信息