PHPackages yehia-abdullah/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. yehia-abdullah/nova-froala-field ActiveLibrary[Templating & Views](/categories/templating) yehia-abdullah/nova-froala-field ================================ A Laravel Nova Froala WYSIWYG Editor Field with some changes to handle images and files in case flexible attribute. 03PHP Since Sep 26Pushed 3y agoCompare [ Source](https://github.com/yahiaAbdullah/nova-froala-field)[ Packagist](https://packagist.org/packages/yehia-abdullah/nova-froala-field)[ RSS](/packages/yehia-abdullah-nova-froala-field/feed)WikiDiscussions master Synced 3d ago READMEChangelogDependenciesVersions (1)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/e42215725029cb7655712be0edb1b5301a305ae9d21e7a53826e9645ff73d7ac/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f66726f616c612f6e6f76612d66726f616c612d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/froala/nova-froala-field) [![Build Status](https://camo.githubusercontent.com/25185529284f670108fba67cc77f6e2ba409496ed8504f2b2feb451871ce32bd/68747470733a2f2f696d672e736869656c64732e696f2f7472617669732f66726f616c612f6e6f76612d66726f616c612d6669656c642f6d61737465722e7376673f7374796c653d666c61742d737175617265)](https://travis-ci.org/froala/nova-froala-field) [![Code Style Status](https://camo.githubusercontent.com/973d650e61459bba7fc7ec0d733250f7b1dce1875b434e8226802f69bf1d9e8d/68747470733a2f2f6769746875622e7374796c6563692e696f2f7265706f732f3135313834303833352f736869656c643f6272616e63683d6d6173746572)](https://github.styleci.io/repos/151840835) [![Total Downloads](https://camo.githubusercontent.com/60bd5ce9b7897f2be7c89d6deb22c428700339e7dc83efe08b3c664cc0ff3889/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f66726f616c612f6e6f76612d66726f616c612d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/froala/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 froala/nova-froala-field ``` Usage ----- [](#usage) Just use the `Froala\NovaFroalaField\Froala` field in your Nova resource: ``` namespace App\Nova; use Froala\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=Froala\\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=Froala\\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 Froala\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 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(); } ``` #### 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=Froala\\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=Froala\\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 15 — LowBetter than 3% of packages Maintenance20 Infrequent updates — may be unmaintained Popularity3 Limited adoption so far Community12 Small or concentrated contributor base Maturity24 Early-stage or recently created project 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. ### Community Maintainers ![](https://www.gravatar.com/avatar/30c073afdcb47b23791b3e831523d9c4cae8756a29bf4b03208da9ac2ccc123b?d=identicon)[yehiaAbdullah](/maintainers/yehiaAbdullah) --- Top Contributors [![yehiaAbdullahOurEducation](https://avatars.githubusercontent.com/u/89448947?v=4)](https://github.com/yehiaAbdullahOurEducation "yehiaAbdullahOurEducation (3 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)") ### Embed Badge ![Health badge](/badges/yehia-abdullah-nova-froala-field/health.svg) ``` [![Health](https://phpackages.com/badges/yehia-abdullah-nova-froala-field/health.svg)](https://phpackages.com/packages/yehia-abdullah-nova-froala-field) ``` ### Alternatives [mustache/mustache A Mustache implementation in PHP. 3.3k44.6M291](/packages/mustache-mustache)[roots/acorn Framework for Roots WordPress projects built with Laravel components. 9682.1M97](/packages/roots-acorn)[whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8053.0M25](/packages/whitecube-nova-flexible-content)[mopa/bootstrap-bundle Easy integration of twitters bootstrap into symfony2 7042.9M33](/packages/mopa-bootstrap-bundle)[limenius/react-bundle Client and Server-side react rendering in a Symfony Bundle 3871.2M](/packages/limenius-react-bundle)[nicmart/string-template StringTemplate is a very simple string template engine for php. I've written it to have a thing like sprintf, but with named and nested substutions. 2101.7M30](/packages/nicmart-string-template) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)