README

Froala WYSIWYG 编辑器 字段用于 Laravel Nova

简介

这是原始 froala/nova-froala-field 仓库的一个分支。这个简约版本将无限期维护，直到我们所有的项目都迁移到 Froala。

安装

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

composer require dive-be/nova-froala-field

用法

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

namespace App\Nova;

use Froala\Nova\Froala;

final class Article extends Resource
{
    // ...

    public function fields(NovaRequest $request): array
    {
        return [
            // ...

            Froala::make('Content'),

            // ...
        ];
    }
}

覆盖配置值

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

php artisan vendor:publish --tag=config --provider=Froala\\Nova\\FroalaServiceProvider

自定义编辑器选项

要更改任何可用 Froala 选项，编辑 froala.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(NovaRequest $request)
{
    return [
        // ...

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

        // ...
    ];
}

附件

注意如果您不打算使用 Froala 的附件功能，您应该在应用程序的 App\Providers\AppServiceProvider 类的 register 方法中调用 Froala::ignoreMigrations 方法。

Nova Froala 字段 提供原生附件驱动程序，其工作方式类似于 Trix 文件上传，但具有优化图像的能力。

运行迁移

php artisan migrate

附件使用

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

use Froala\Nova\Froala;

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

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

use Froala\Nova\Attachments\PendingAttachment;

protected function schedule(Schedule $schedule): void
{
    $schedule->command('model:prune', [
        '--model' => [PendingAttachment::class],
    ])->daily();
}

图像优化

注意不要忘记查看 spatie/image-optimizer 的文档，例如在您的机器上安装所需的二进制文件。

默认情况下，所有上传的图像都将通过 spatie/image-optimizer 进行优化。您可以在配置文件中禁用图像优化（不建议）

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

'optimize_images' => false,

//...

上传最大文件大小

您可以设置附件的最大上传文件大小。如果设置为 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\\Nova\\FroalaServiceProvider

包含到显示编辑内容的视图中

<!-- 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/Nova/Froala;

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

只需单击 显示内容

许可证密钥

要设置您的许可证密钥，设置 FROALA_KEY 环境变量

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

高级

自定义事件处理器

如果您想要为 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 实例组件中一样。

之后，在NovaServiceProvider::boot方法中将js文件加载到Nova脚本中

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

自定义附件处理器

您可以通过传递一个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
npm install

修复代码风格

PHP

composer format

npm run format

测试

composer test

构建开发资源

npm run dev

构建生产资源

npm run prod

贡献

要贡献，只需将包含您更改的pull request提交到这个仓库。确保在pull request描述中详细说明。

致谢

许可

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

dive-be / nova-froala-field

维护者

详细信息