PHPackages hyperlab-be/nova-froala-field - PHPackages - PHPackages [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register) 1. [Directory](/) 2. / 3. [Templating & Views](/categories/templating) 4. / 5. hyperlab-be/nova-froala-field ActiveLibrary[Templating & Views](/categories/templating) hyperlab-be/nova-froala-field ============================= A Laravel Nova Froala WYSIWYG Editor Field. 4.0.0(3y ago)0133MITPHPPHP >=7.1.3 Since Oct 10Pushed 3y agoCompare [ Source](https://github.com/michielkempen/nova-froala-field)[ Packagist](https://packagist.org/packages/hyperlab-be/nova-froala-field)[ Docs](https://github.com/michielkempen/nova-froala-field)[ RSS](/packages/hyperlab-be-nova-froala-field/feed)WikiDiscussions master Synced today READMEChangelog (2)Dependencies (6)Versions (27)Used By (0) [![Nova Froala Field](docs/froala-nova.png)](docs/froala-nova.png) **Froala WYSIWYG Editor** field for Laravel Nova [![Latest Version on Packagist](https://camo.githubusercontent.com/7b4317f76e6fea4302333151a34c944821cae46ce8b718b62e450dc28566a891/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f6d69636869656c6b656d70656e2f6e6f76612d66726f616c612d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/michielkempen/nova-froala-field) [![Build Status](https://camo.githubusercontent.com/bf02e09bf94233419b7f6e56322099d882bcee81b676a0323bbc1ce515331431/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f6d69636869656c6b656d70656e2f6e6f76612d66726f616c612d6669656c642f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/michielkempen/nova-froala-field) [![Code Style Status](https://camo.githubusercontent.com/973d650e61459bba7fc7ec0d733250f7b1dce1875b434e8226802f69bf1d9e8d/68747470733a2f2f6769746875622e7374796c6563692e696f2f7265706f732f3135313834303833352f736869656c643f6272616e63683d6d6173746572)](https://github.styleci.io/repos/151840835) [![Total Downloads](https://camo.githubusercontent.com/c39a1a94a41522bd232e4afc197ef0c8a25a5adc7441020722a89af0503e3c97/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f6d69636869656c6b656d70656e2f6e6f76612d66726f616c612d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/michielkempen/nova-froala-field) Introduction ------------ [](#introduction) ### Froala WYSIWYG Editor Field [](#froala-wysiwyg-editor-field) Full support of attaching Images, Files and Videos [![Form Field](docs/form-field.png)](docs/form-field.png) Notifications for *Froala* events are handled by [Toasted](https://nova.laravel.com/docs/1.0/customization/frontend.html#notifications) which is provided in *Nova* by default. Upgrading --------- [](#upgrading) For upgrading to **Froala 3**, check out – [Upgrading Instructions](UPGRADING.md). Installation ------------ [](#installation) You can install the package into a Laravel application that uses [Nova](https://nova.laravel.com) via composer: ``` composer require michielkempen/nova-froala-field ``` Usage ----- [](#usage) Just use the `MichielKempen\NovaFroalaField\Froala` field in your Nova resource: ``` namespace App\Nova; use MichielKempen\NovaFroalaField\Froala; class Article extends Resource { // ... public function fields(Request $request) { return [ // ... Froala::make('Content'), // ... ]; } } ``` Override Config Values ---------------------- [](#override-config-values) To change any of config values for *froala field*, publish a config file: ``` php artisan vendor:publish --tag=config --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider ``` Customize Editor Options ------------------------ [](#customize-editor-options) For changing any [Available Froala Option](https://www.froala.com/wysiwyg-editor/docs/options)edit `nova.froala-field.options` value: ``` /* |-------------------------------------------------------------------------- | 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', ], ], ], //... ``` If you want to set options only to specific field, just pass them to `options` method: ``` public function fields(Request $request) { return [ // ... Froala::make('Content')->options([ 'editorClass' => 'custom-class', 'height' => 300, ]), // ... ]; } ``` Attachments ----------- [](#attachments) **Nova Froala Field** provides native attachments driver which works similar to [Trix File Uploads](https://nova.laravel.com/docs/1.0/resources/fields.html#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 [](#froala-driver) To use `froala` driver, publish and run a migration: ``` php artisan vendor:publish --tag=migrations --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider php artisan migrate ``` ### Trix Driver [](#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: ``` /* |-------------------------------------------------------------------------- | 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' //... ``` ### Attachments Usage [](#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: ``` use MichielKempen\NovaFroalaField\Froala; Froala::make('Content')->withFiles('public'); ``` And also, in your `app/Console/Kernel.php` file, you should register a [daily job](https://laravel.com/docs/5.7/scheduling) to prune any stale attachments from the pending attachments table and storage: ``` 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(); } ``` #### Filenames Preservation [](#filenames-preservation) A unique ID is generated by default to serve as the file name according to `store` [method specification](https://laravel.com/docs/master/filesystem#file-uploads). If you want to preserve original client filenames for uploaded attachments, change `preserve_file_names` option in config file to `true`. ``` /* |-------------------------------------------------------------------------- | Preserve Attachments File Name |-------------------------------------------------------------------------- | | Ability to preserve client original file name for uploaded | image, file or video. | */ 'preserve_file_names' => true, //... ``` #### Images Optimization [](#images-optimization) All uploaded images will be optimized by default by [spatie/image-optimizer](https://github.com/spatie/image-optimizer). You can disable image optimization in config file: ``` /* |-------------------------------------------------------------------------- | Automatically Images Optimization |-------------------------------------------------------------------------- | | Optimize all uploaded images by default. | */ 'optimize_images' => false, //... ``` Or set custom optimization options for any optimizer: ``` /* |-------------------------------------------------------------------------- | 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 ], ], ``` > Image optimization currently supported only for local filesystems ### Upload Max Filesize [](#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. ``` /* |-------------------------------------------------------------------------- | 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 http://php.net/manual/en/faq.using.php#faq.using.shorthandbytes} | */ 'upload_max_filesize' => null, //... ``` Display Edited Content ---------------------- [](#display-edited-content) According to *Froala* [Display Edited Content](https://www.froala.com/wysiwyg-editor/docs/overview#frontend) documentation you should publish *Froala* styles: ``` php artisan vendor:publish --tag=froala-styles --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider ``` 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: ``` {!! $article->content !!} ``` Show on Index Page ------------------ [](#show-on-index-page) You have an ability to show field content on resource index page in popup window: ``` use Froala/NovaFroalaField/Froala; Froala::make('Content')->showOnIndex(); ``` Just click **Show Content** [![Index Field](docs/index-field.png)](docs/index-field.png) License Key ----------- [](#license-key) To setup your license key, uncomment `key` option in the config file and set `FROALA_KEY` environment variable ``` // ... 'options' => [ 'key' => env('FROALA_KEY'), // ... ], ``` 3rd Party Integrations ---------------------- [](#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: ``` php artisan vendor:publish --tag=nova-froala-field-plugins --provider=MichielKempen\\NovaFroalaField\\FroalaFieldServiceProvider ``` Script will be dynamically imported when you enable `embedly` or `spellChecker` buttons. ### TUI Advanced Image Editor [](#tui-advanced-image-editor) If you want to use *TUI Image Editor* to add advanced image editing options, switch `tuiEnable` option to `true`: ``` 'options' => [ // 'key' => env('FROALA_KEY'), // 'tuiEnable' => true, //... ], ``` ### Font Awesome 5 [](#font-awesome-5) If you have a [Font Awesome Pro license](https://fontawesome.com), 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: ``` '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' //... ], ``` **Note**: > If you have any problems with loading 3rd party plugins, try to republish it ``` php artisan vendor:publish --tag=nova-froala-field-plugins --force ``` Advanced -------- [](#advanced) ### Custom Event Handlers [](#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`: ``` window.froala = { events: { 'image.error': (error, response) => {}, 'imageManager.error': (error, response) => {}, 'file.error': (error, response) => {}, } }; ``` 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: ``` public function boot() { parent::boot(); Nova::serving(function (ServingNova $event) { Nova::script('froala-event-handlers', public_path('path/to/js/file.js')); }); } ``` ### Customize Attachment Handlers [](#customize-attachment-handlers) You can change any of attachment handlers by passing a `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) ``` Testing ------- [](#testing) ``` composer test ``` Changelog --------- [](#changelog) Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently. Contributing ------------ [](#contributing) Please see [CONTRIBUTING](CONTRIBUTING.md) for details. Security -------- [](#security) If you discover any security related issues, please email instead of using the issue tracker. Credits ------- [](#credits) - [Slava Razum](https://github.com/slavarazum) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 30 — LowBetter than 64% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity10 Limited adoption so far Community12 Small or concentrated contributor base Maturity66 Established project with proven stability Bus Factor2 2 contributors hold 50%+ of commits How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window. **Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores. **Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement. **Maturity (30%)** — Project age, version count, PHP version support, and release stability. ### Release Activity Cadence Every ~73 days Recently: every ~271 days Total 23 Last Release 1160d ago Major Versions 1.1.4 → 2.0.02019-03-11 2.2.1 → 3.0.02019-07-03 3.5.0 → 4.0.02023-03-06 PHP version history (2 changes)1.0.0PHP >=7.1.0 3.2.0PHP >=7.1.3 ### Community Maintainers ![](https://www.gravatar.com/avatar/a7cd1a8c7cc7975e2168c34b67c0674f4f6deda6e085630b7812f339a184e278?d=identicon)[hyperlab](/maintainers/hyperlab) --- Top Contributors [![michielkempen](https://avatars.githubusercontent.com/u/14795113?v=4)](https://github.com/michielkempen "michielkempen (4 commits)")[![clingle](https://avatars.githubusercontent.com/u/13282075?v=4)](https://github.com/clingle "clingle (1 commits)")[![shaffe-fr](https://avatars.githubusercontent.com/u/3834222?v=4)](https://github.com/shaffe-fr "shaffe-fr (1 commits)")[![spekulatius](https://avatars.githubusercontent.com/u/8433587?v=4)](https://github.com/spekulatius "spekulatius (1 commits)")[![sytheveenje](https://avatars.githubusercontent.com/u/1999649?v=4)](https://github.com/sytheveenje "sytheveenje (1 commits)")[![tharindu-abans](https://avatars.githubusercontent.com/u/48512374?v=4)](https://github.com/tharindu-abans "tharindu-abans (1 commits)") --- Tags laraveleditorfieldwysiwygnovafroala ### Code Quality TestsPHPUnit ### Embed Badge ![Health badge](/badges/hyperlab-be-nova-froala-field/health.svg) ``` [![Health](https://phpackages.com/badges/hyperlab-be-nova-froala-field/health.svg)](https://phpackages.com/packages/hyperlab-be-nova-froala-field) ``` ### Alternatives [whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8053.0M25](/packages/whitecube-nova-flexible-content)[emilianotisato/nova-tinymce This Nova package allow you to use TinyMCE editor for text areas.You can customize the editor options and... you can upload images to your server and put them rigth there on the text without leaving the text editor! 116884.3k4](/packages/emilianotisato-nova-tinymce)[silvanite/novafieldcheckboxes A Laravel Nova field to display a number of multi-select options using checkboxes. 70846.9k1](/packages/silvanite-novafieldcheckboxes)[advoor/nova-editor-js A Laravel Nova field bringing EditorJs magic to Nova. 92179.0k3](/packages/advoor-nova-editor-js)[oneduo/nova-time-field A Laravel Nova time field 13157.6k](/packages/oneduo-nova-time-field)[joshmoreno/nova-html-field A Laravel Nova field for rendering custom html on index, detail, and forms. 1398.6k2](/packages/joshmoreno-nova-html-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)