PHPackages dive-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. dive-be/nova-froala-field ActiveLibrary[Templating & Views](/categories/templating) dive-be/nova-froala-field ========================= A Laravel Nova Froala WYSIWYG Editor Field. 1.3.0(1y ago)229.5k—2.6%3MITPHPPHP ~8.4CI passing Since Jul 24Pushed 1y agoCompare [ Source](https://github.com/dive-be/nova-froala-field)[ Packagist](https://packagist.org/packages/dive-be/nova-froala-field)[ Docs](https://github.com/dive-be/nova-froala-field)[ RSS](/packages/dive-be-nova-froala-field/feed)WikiDiscussions master Synced 3d ago READMEChangelog (4)Dependencies (7)Versions (5)Used By (0) [![Nova Froala Field](.github/docs/froala-nova.png)](.github/docs/froala-nova.png) **Froala WYSIWYG Editor** field for Laravel Nova Introduction ------------ [](#introduction) This is a fork of the original `froala/nova-froala-field` repository. This minimalistic version will be maintained indefinitely until all of our projects are migrated off Froala. Installation ------------ [](#installation) You can install the package into a Laravel application that uses [Nova](https://nova.laravel.com) via composer: ``` composer require dive-be/nova-froala-field ``` Usage ----- [](#usage) Just use the `Froala\Nova\Froala` field in your Nova resource: ``` namespace App\Nova; use Froala\Nova\Froala; final class Article extends Resource { // ... public function fields(NovaRequest $request): array { 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\\Nova\\FroalaServiceProvider ``` Customize Editor Options ------------------------ [](#customize-editor-options) For changing any [Available Froala Option](https://www.froala.com/wysiwyg-editor/docs/options)edit `froala.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', ], [ 'html', ], ], ], //... ``` If you want to set options only to specific field, just pass them to `options` method: ``` public function fields(NovaRequest $request) { return [ // ... Froala::make('Content')->options([ 'editorClass' => 'custom-class', 'height' => 300, ]), // ... ]; } ``` Attachments ----------- [](#attachments) > **Note** If you are not going to use Froala's attachment functionality, you should call the `Froala::ignoreMigrations` method in the register method of your application's `App\Providers\AppServiceProvider` class. **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. Run migrations: ``` php artisan migrate ``` ### 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\Nova\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/10.x/scheduling) to prune any stale attachments from the pending attachments table and storage: ``` use Froala\Nova\Attachments\PendingAttachment; protected function schedule(Schedule $schedule): void { $schedule->command('model:prune', [ '--model' => [PendingAttachment::class], ])->daily(); } ``` #### Images Optimization [](#images-optimization) > **Note** Don't forget to check out [spatie/image-optimizer](https://github.com/spatie/image-optimizer)'s documentation e.g. to install the required binaries on your machine. 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 (not recommended): ``` /* |-------------------------------------------------------------------------- | Automatically Images Optimization |-------------------------------------------------------------------------- | | Optimize all uploaded images by default. | */ 'optimize_images' => false, //... ``` ### 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\\Nova\\FroalaServiceProvider ``` 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/Nova/Froala; Froala::make('Content')->showOnIndex(); ``` Just click **Show Content** [![Index Field](.github/docs/index-field.png)](.github/docs/index-field.png) License Key ----------- [](#license-key) To setup your license key, set `FROALA_KEY` environment variable: ``` // ... 'options' => [ 'key' => env('FROALA_KEY'), // ... ], ``` 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(): void { Nova::serving(function (ServingNova $event) { Nova::script('froala-event-handlers', public_path('path/to/js/file.js')); }); parent::boot(); } ``` ### 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) ``` Development ----------- [](#development) You may get started with this package as follows (after cloning the repository): ``` composer install npm install ``` ### Fixing code-style [](#fixing-code-style) PHP ``` composer format ``` JS ``` npm run format ``` ### Testing [](#testing) ``` composer test ``` ### Building dev assets [](#building-dev-assets) ``` npm run dev ``` ### Building production assets [](#building-production-assets) ``` npm run prod ``` Contributing ------------ [](#contributing) To contribute, simply make a pull request to this repository with your changes. Make sure they are documented well in your pull request description. Credits ------- [](#credits) - [Muhammed Sarı](https://github.com/mabdullahsari) - [All Contributors](../../contributors) License ------- [](#license) The MIT License (MIT). Please see [License File](LICENSE.md) for more information. ### Health Score 43 — FairBetter than 89% of packages Maintenance46 Moderate activity, may be stable Popularity33 Limited adoption so far Community14 Small or concentrated contributor base Maturity65 Established project with proven stability Bus Factor1 Top contributor holds 64.3% of commits — single point of failure 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 ~219 days Total 4 Last Release 417d ago PHP version history (3 changes)1.0.0PHP ^8.2 1.1.0PHP ~8.3 1.2.0PHP ~8.4 ### Community Maintainers ![](https://avatars.githubusercontent.com/u/59749?v=4)[Artem Loenko](/maintainers/dive)[@dive](https://github.com/dive) --- Top Contributors [![Woeler](https://avatars.githubusercontent.com/u/18422096?v=4)](https://github.com/Woeler "Woeler (9 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 Static AnalysisPHPStan Code StyleLaravel Pint ### Embed Badge ![Health badge](/badges/dive-be-nova-froala-field/health.svg) ``` [![Health](https://phpackages.com/badges/dive-be-nova-froala-field/health.svg)](https://phpackages.com/packages/dive-be-nova-froala-field) ``` ### Alternatives [whitecube/nova-flexible-content Flexible Content & Repeater Fields for Laravel Nova. 8113.3M27](/packages/whitecube-nova-flexible-content)[advoor/nova-editor-js A Laravel Nova field bringing EditorJs magic to Nova. 92219.3k3](/packages/advoor-nova-editor-js)[open-dxp/opendxp Content & Product Management Framework (CMS/PIM) 9421.6k61](/packages/open-dxp-opendxp)[simplesquid/nova-advanced-number-field A Laravel Nova field which adds additional functionality to the default Number field. 11166.7k1](/packages/simplesquid-nova-advanced-number-field) PHPackages © 2026 [Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)