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 高级图像编辑器

如果您想使用 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)。请参阅许可证文件了解更多信息。

froala / nova-froala-field

维护者

详细信息