michielkempen / nova-froala-field
一个用于 Laravel Nova 的 Froala WYSIWYG 编辑器字段。
Requires
- php: >=7.1.3
- laravel/nova: *
- league/flysystem: ^1.0.8
- spatie/image-optimizer: ^1.1
Requires (Dev)
- mockery/mockery: ^1.1
- orchestra/testbench: ^3.8|^4.0
- phpunit/phpunit: ^7.0|^8.0
README
Froala WYSIWYG 编辑器 字段,适用于 Laravel Nova
简介
Froala WYSIWYG 编辑器字段
完全支持附件图片、文件和视频的附加
对于 Froala 事件的提示由 Toasted 处理,这是 Nova 默认提供的。
升级
要升级到 Froala 3,请查看 – 升级说明。
安装
您可以通过 composer 将此包安装到使用 Nova 的 Laravel 应用程序中
composer require michielkempen/nova-froala-field
使用方法
只需在您的 Nova 资源中使用 MichielKempen\NovaFroalaField\Froala
字段即可
namespace App\Nova; use MichielKempen\NovaFroalaField\Froala; class Article extends Resource { // ... public function fields(Request $request) { return [ // ... Froala::make('Content'), // ... ]; } }
覆盖配置值
要更改 froala 字段的所有配置值,请发布一个配置文件
php artisan vendor:publish --tag=config --provider=MichielKempen\\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=MichielKempen\\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 MichielKempen\NovaFroalaField\Froala; Froala::make('Content')->withFiles('public');
此外,在您的 app/Console/Kernel.php
文件中,您应注册一个 每日作业,以从待处理附件表和存储中删除任何过时的附件
use MichielKempen\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=MichielKempen\\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=MichielKempen\\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 表单字段组件的上下文将自动应用,您可以在回调中像使用 Vue 实例组件一样使用 this
。
之后,在 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)。有关更多信息,请参阅 许可证文件