Download the PHP package michielkempen/nova-froala-field without Composer

Froala WYSIWYG Editor field for Laravel Nova

Introduction

Froala WYSIWYG Editor Field

Full support of attaching Images, Files and Videos

Notifications for Froala events are handled by Toasted which is provided in Nova by default.

Upgrading

For upgrading to Froala 3, check out – Upgrading Instructions.

Installation

You can install the package into a Laravel application that uses Nova via composer:

Usage

Just use the MichielKempen\NovaFroalaField\Froala field in your Nova resource:

Override Config Values

To change any of config values for froala field, publish a config file:

Customize Editor Options

For changing any Available Froala Option edit nova.froala-field.options value:

If you want to set options only to specific field, just pass them to options method:

Attachments

Nova Froala Field provides native attachments driver which works similar to Trix File Uploads, but with ability to optimize images and preserve file names. Also you have an ability to switch to the trix driver to use its upload system.

• It's Recommended to use froala driver (enabled by default) to be able to use current and future additional features for attachments, provided by Froala.

Froala Driver

To use froala driver, publish and run a migration:

Trix Driver

If previously you have used Trix attachments and you want to preserve behavior with same tables and handlers you can use trix driver in config file:

Attachments Usage

To allow users to upload images, files and videos, just like with Trix field, chain the withFiles method onto the field's definition. When calling the withFiles method, you should pass the name of the filesystem disk that photos should be stored on:

And also, in your app/Console/Kernel.php file, you should register a daily job to prune any stale attachments from the pending attachments table and storage:

Filenames Preservation

A unique ID is generated by default to serve as the file name according to store method specification. If you want to preserve original client filenames for uploaded attachments, change preserve_file_names option in config file to true.

Images Optimization

All uploaded images will be optimized by default by spatie/image-optimizer.

You can disable image optimization in config file:

Or set custom optimization options for any optimizer:

Image optimization currently supported only for local filesystems

Upload Max Filesize

You can set max upload filesize for attachments. If set to null, max upload filesize equals to php.ini upload_max_filesize directive value.

Display Edited Content

According to Froala Display Edited Content documentation you should publish Froala styles:

include into view where an edited content is shown:

Also, you should make sure that you put the edited content inside an element that has the .fr-view class:

Show on Index Page

You have an ability to show field content on resource index page in popup window:

Just click Show Content

License Key

To setup your license key, uncomment key option in the config file and set FROALA_KEY environment variable

3rd Party Integrations

To enable a button that uses some a 3rd party service and needs additional script including, like: Embed.ly, TUI Advanced Image Editor or SCAYT Web SpellChecker, you should publish 3rd party scripts:

Script will be dynamically imported when you enable embedly or spellChecker buttons.

TUI Advanced Image Editor

If you want to use TUI Image Editor to add advanced image editing options, switch tuiEnable option to true:

Font Awesome 5

If you have a Font Awesome Pro license, you can enable using the regular icons instead of the solid ones by using the iconsTemplate option.

Add iconsTemplate config value into froala-field.php config:

Note:

If you have any problems with loading 3rd party plugins, try to republish it

Advanced

Custom Event Handlers

If you want to setup custom event handlers for froala editor instance, create js file and assign events property to window.froala:

to all callbacks provided in window.froala.events, the context of VueJS form field component is automatically applied, you can work with this inside callbacks like with Vue instance component.

After that, load the js file into Nova scripts in NovaServiceProvider::boot method:

Customize Attachment Handlers

You can change any of attachment handlers by passing a callable:

Testing

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email [email protected] instead of using the issue tracker.

Credits

• Slava Razum
• All Contributors

License

The MIT License (MIT). Please see License File for more information.