Nova Trumbowyg Laravel Package

Getting Started

This is a Nova field package that wraps the Trumbowyg WYSIWYG editor. Treat it as a legacy Nova 1/2-era package first: confirm your Nova and Laravel versions before installing. Last release was 2019, so it is unlikely to work cleanly with Nova 4/5.

Minimal setup:

composer require johnathan/nova-trumbowyg

In a Nova resource, import the field class from the package namespace shown in its README and swap a Textarea for it:

use Johnathan\NovaTrumbowyg\Trumbowyg;

Trumbowyg::make('Content')
    ->options([
        'btns' => [
            ['viewHTML'],
            ['formatting'],
            ['strong', 'em', 'del'],
            ['link'],
            ['undo', 'redo'],
        ],
    ]),

Look first at:

1. composer.json in the package for laravel/nova and illuminate/* constraints.
2. The README for the exact namespace, option method, and asset publishing command.
3. src/FieldServiceProvider.php and the field Vue component to see how assets are loaded.
4. Your Nova version’s field API, because 2019-era fields often assume Nova 2 conventions.

First real use case: a CMS “Page body” or “Post content” field where editors need links, bold/italic, and basic formatting. Keep it on form views initially, save the resulting HTML into a text/longText column, and render it through a sanitizer rather than directly.

Implementation Patterns

Use the field as a drop-in replacement for long-form HTML content:

public function fields(Request $request)
{
    return [
        ID::make()->sortable(),
        Text::make('Title')->rules('required', 'max:255'),
        Trumbowyg::make('Body')
            ->rules('required')
            ->onlyOnForms(),
        Text::make('Body')
            ->displayUsing(fn ($value) => \Illuminate\Support\Str::limit(strip_tags($value), 120))
            ->exceptOnForms(),
    ];
}

Common day-to-day patterns:

• Centralize editor configuration in a helper or custom field class so every resource uses the same toolbar. Avoid duplicating a large options() array across resources.
• Sanitize HTML on save, not only on display. Use mews/purifier, HTMLPurifier, or an allowlist-based sanitizer in a model mutator/observer.
• Validate for required content and storage limits, but remember validation length applies to HTML markup, not visible text. A max:255 rule is usually wrong for a rich-text column.
• Render saved HTML only through a sanitized Blade partial or {!! $sanitizedHtml !!} after purification. For index columns, show a strip_tags() preview.
• Keep image/file upload outside the editor unless you explicitly implement the Trumbowyg upload plugin. A separate Nova File/Image field is easier to secure and validate.
• For translatable content, combine with a translation package only if it supports your Nova version; otherwise use per-locale fields or JSON casting manually.
• Use onlyOnForms() / exceptOnForms() to avoid trying to render the editor in index/detail contexts where its JS may not initialize.

Integration tips:

• If the package exposes an options() or setOptions() method, pass Trumbowyg’s native config there. Toolbar buttons are arrays of arrays; getting the nesting wrong produces a blank or malformed toolbar.
• Prefer a small toolbar for business users. Trumbowyg’s full toolbar exposes HTML view and formatting controls that often produce inconsistent markup.
• Add a model accessor for plain-text excerpts so index/search pages do not need to parse HTML repeatedly.
• If you need custom editor buttons, register a Trumbowyg plugin in a small Nova asset and pass the plugin name through the field options. This is an extension point, but it is fragile on old Nova versions.

Gotchas and Tips

• Compatibility is the first gotcha. This package was last released in 2019 and has a small maintenance footprint. Check Composer constraints before adopting it; if composer require conflicts with Nova 4/5, do not force it. Use a maintained Tiptap/Quill/Trumbowyg Nova field instead, or fork and upgrade the Vue component.
• Nova is a Vue SPA. Old jQuery-based editor fields often fail when navigating between create/edit/detail pages because the editor is not destroyed and reinitialized. Watch for duplicate toolbars, missing content on edit, or a blank editor after the first page load.
• Asset loading issues show up as Trumbowyg is not defined, missing icons, or 404s for CSS/JS. Check the browser console and network tab, clear Nova/Composer caches, and confirm whether the package requires vendor:publish.
• Do not trust editor output. WYSIWYG HTML is user input. Sanitize server-side before storage or rendering, especially if the content is shown on a public site.
• HTML length validation is misleading. Use a generous database column and validate sanitized visible length separately if needed.
• Toolbar configuration is easy to break. Trumbowyg expects button groups as nested arrays, e.g. [['strong', 'em'], ['link']], not a flat list in every case.
• Dark mode and Nova CSS can conflict with Trumbowyg’s default skin. Expect to publish or override CSS if you use Nova’s dark theme.
• Image upload via the editor needs an authenticated endpoint, CSRF handling, file validation, and storage cleanup. For most Nova apps, a separate image field is safer and simpler.
• Debugging tip: temporarily replace the field with a plain Textarea to confirm the rest of the resource works, then isolate whether the failure is field initialization, assets, or saved HTML.
• Extension points are limited: Trumbowyg options, custom toolbar buttons/plugins, published assets, and possibly overriding the field Vue component. Document any fork or override, because the upstream package is unlikely to receive fixes.