README

Froala WYSIWYG 编辑器 字段用于 Laravel Nova

简介

Froala WYSIWYG 编辑器字段

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

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

安装

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

composer require froala/nova-froala-field

然后，您必须发布 Font Awesome 字体以显示编辑器按钮。

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

使用方法

只需在您的 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',
        '|',
        'html',
    ],
],

//...

如果您只想将选项设置到特定的字段，只需将它们传递给 options 方法即可。

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

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

        // ...
    ];
}

附件

Nova Froala Field 提供了与 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、Aviary 或 SCAYT Web 拼写检查器，您应该发布第三方脚本

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

脚本将在您启用 embedly 或 spellChecker 按钮或设置 aviaryKey API 密钥时动态导入。

高级

自定义事件处理器

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

window.froala = {
    events: {
        'froalaEditor.image.error': (e, editor, error, response) => {},
        'froalaEditor.imageManager.error': (e, editor, error, response) => {},
        'froalaEditor.file.error': (e, editor, 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

变更日志

有关最近更改的更多信息，请参阅变更日志

贡献

有关详细信息，请参阅贡献指南

安全性

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

鸣谢

许可

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

grave2000 / nova-froala-field

维护者

详细信息