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)222.5k—0.9%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 1mo 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 91% of packages Maintenance49 Moderate activity, may be stable Popularity32 Limited adoption so far Community14 Small or concentrated contributor base Maturity64 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 370d ago PHP version history (3 changes)1.0.0PHP ^8.2 1.1.0PHP ~8.3 1.2.0PHP ~8.4 ### Community Maintainers ![](https://www.gravatar.com/avatar/a265853c8db7c699f64f523ee782dc5ec095bfb456379222d1b0b97d90e4c735?d=identicon)[dive](/maintainers/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. 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)