Nova Froala Field Laravel Package

Getting Started

Install the field with Composer and let Laravel's package discovery register the service provider:

composer require wimski/nova-froala-field

If the package ships a config file, publish it next; otherwise the defaults are usually enough:

php artisan vendor:publish --provider="Wimski\NovaFroalaField\NovaFroalaFieldServiceProvider"

Where to look first:

1. The package README for the exact field namespace and supported option methods.
2. The service provider — confirm it calls Nova::script() / Nova::style() (or uses nova.mix) so the Froala JS/CSS bundle is loaded on the Nova dashboard.
3. The field class itself — check whether options are passed with ->options([...]), a dedicated config file, or fluent helpers like ->toolbar() / ->height().

First use case — a basic rich-text body field in a Nova resource:

use Wimski\NovaFroalaField\Froala; // verify namespace in README

public function fields(Request $request)
{
    return [
        ID::make()->sortable(),
        Text::make('Title'),
        Froala::make('Body'),
    ];
}

Run php artisan nova:publish if assets do not appear, then open a create/edit form and confirm the editor mounts. If the textarea renders as a plain input, the asset registration or component name is the issue — inspect the browser console first.

Implementation Patterns

Customising the toolbar and height. Froala options are passed as a plain array and serialised to JS, so almost any valid Froala config key works:

Froala::make('Body')->options([
    'toolbarButtons' => ['bold', 'italic', 'underline', '|', 'formatOL', 'formatUL', '|', 'insertLink'],
    'toolbarButtonsXS' => ['bold', 'italic'],
    'heightMin' => 300,
    'placeholderText' => 'Write the article…',
    'pluginsEnabled' => ['lists', 'link', 'codeView', 'fullscreen'],
]);

Keep option arrays small and serialisable — closures, resources, and objects will break the JSON payload.

Extracting a reusable field. Most projects standardise the toolbar once and reuse it. A small factory keeps resources consistent:

// app/Nova/Fields/ArticleBody.php
class ArticleBody extends Froala
{
    public function __construct($name = 'Body')
    {
        parent::__construct($name);

        $this->options([
            'heightMin' => 300,
            'toolbarButtons' => ['bold', 'italic', 'formatOL', 'formatUL', 'insertLink', 'codeView'],
        ]);
    }
}

Image and file uploads. Froala uploads through imageUploadURL / fileUploadURL endpoints. Point these at a route in your app and protect it with the nova middleware and CSRF; return the JSON shape Froala expects ({"link": "..."}):

Froala::make('Body')->options([
    'imageUploadURL' => '/nova-api/froala/upload',
    'imageUploadParams' => ['_token' => csrf_token()],
]);

Store uploads through Laravel's filesystem on a disk your field/renderer can read from, and validate MIME type and size server-side — Froala does not validate on the server for you.

Display vs. edit. On detail and index views, HTML is rendered rather than the editor. Decide early whether to strip tags:

Froala::make('Body')
    ->hideFromIndex()
    ->displayUsing(fn ($value) => Str::limit(strip_tags($value), 120));

Integration with other Nova features. Standard field modifiers compose normally — ->rules('required'), ->nullable(), ->dependsOn(), ->readonly(), ->help(). Because the value is HTML, ->rules('max:65535') matters for TEXT columns, and sanitisation belongs in a FormRequest or mutator rather than the field.

Gotchas and Tips

• Froala licensing. Froala Editor is commercial software. The bundled JS is a trial build; production use requires a license key (froalaEditor.key option or a licensed build). This is the single biggest reason teams pick TinyMCE/Quill instead. Check the package's Froala version before assuming a license key is wired in.
• XSS. The field stores raw HTML. Never render it with {!! $model->body !!} without sanitising — use HTMLPurifier, mews/purifier, or a strict allow-list. Consider storing sanitised HTML at write time.
• Assets not loading. If the editor doesn't appear, verify Nova::script()/Nova::style() registration and that php artisan nova:publish has run. Nova 4+ caches compiled assets; clear with php artisan nova:publish --force and hard-refresh.
• Package maintenance. Low star count and dependents mean Nova major-version compatibility may lag. Pin the package and test upgrades against Nova 4/5 explicitly; be prepared to fork the field component if the editor version is stale.
• Option merging. Confirm whether ->options() replaces defaults or merges into them. If it replaces, omitting keys like toolbarButtons can leave you with the full default toolbar unexpectedly — or no toolbar at all.
• Upload endpoint auth. A naive imageUploadURL bypasses Nova auth and CSRF. Register the route inside your app with the nova middleware group and validate with a FormRequest.
• CSRF with POST uploads. Froala sends multipart POSTs; include _token via imageUploadParams/fileUploadParams or Laravel will 419.
• CSP and CDNs. If you enforce a Content-Security-Policy, Froala's inline styles and blob URLs need style-src 'unsafe-inline' and appropriate img-src allowances. Debug in the browser console — CSP violations appear there, not in Laravel logs.
• Debugging checklist. Missing editor → JS console and Network tab for the field bundle. Upload failures → Network tab response body for the JSON Froala expected. Value not saving → check the field's attribute and that the column is TEXT/LONGTEXT.
• Localisation. Froala language packs are separate; set language in options and ensure the language file is served, otherwise the editor silently falls back to English.