Download the PHP package kamikx/laravel-jodit without Composer

Laravel Jodit

A Laravel package that integrates the Jodit WYSIWYG editor through a reusable Blade component. It works seamlessly in plain Blade templates, Blade view components, Livewire components and Filament forms. The package includes a built-in server-side file browser and uploader connector, along with secure per-editor storage scopes that isolate uploaded files and browsing access for each editor instance.

Preview

Jodit Editor in Laravel Filament form

Jodit Editor File Upload Options

Jodit Editor File Browser

Jodit Editor Image Editor

Jodit Editor Visual Blocks (custom plugin)

Features

• One Blade component — <x-jodit::editor name="content" /> covers all use cases
• Livewire-ready — pass wire-model and the editor syncs with your Livewire component
• Filament-ready — custom field JoditEditor
• Secure per-editor storage scopes — assign an isolated disk and base path to each field, with encrypted scope validation preventing access above its root (documentation)
• Local assets by default — ships Jodit, js-beautify, and Ace; optional CDN URLs use an automatic local fallback (documentation)
• Fully configurable — publish the config to override defaults, CDN URLs, middleware, etc.
• Flexible toolbar buttons — supports named profiles, custom button arrays, separators, and dropdown-friendly controls like align

Requirements

• PHP ^8.3
• Laravel ^11.0 || ^12.0 || ^13.0
• intervention/image ^4.0 — bundled as a dependency; powers image resize and crop features

Installation

The service provider is auto-discovered. Publish the pre-built browser assets:

No Node.js or Vite build is required in the consuming Laravel application. Optionally publish the config:

Usage

1. Ensure your layout has asset stacks

Your main layout must include the stacks that the component pushes assets into.
The default stack names are after-styles (CSS) and after-scripts (JS).
Add these to your layout if they are not already present:

You can change the stack names in config/jodit.php.

2. Drop the component into any form

Plain Blade

With required + placeholder

Livewire — two-way sync

Inside a Livewire component the wrapper is automatically set to wire:ignore so Livewire's DOM diffing does not destroy the editor. Changes are flushed back to the Livewire component via the JavaScript API with a 300 ms debounce.

Disable file browser

Autosize (default), custom height, and connector URL

Jodit grows with its content by default. No height option is required:

For a global setting, keep 'defaults.height' => 'auto' in config/jodit.php. You may also set 'defaults.minHeight' => 300 to change the initial minimum height without disabling autosize.

Set a fixed height for one editor when needed:

3. Use the optional Filament 5 field

The package does not install Filament. If your application does not already use Filament 5, install the Forms package first:

Import the optional field in your Filament resource or form schema:

Use extraButtons() to add one or more toolbar buttons without replacing the selected or default profile. Multiple calls are appended in order.

Using JoditEditor without filament/forms installed throws a descriptive exception with the required Composer command. Plain Blade and Livewire usage remain available without Filament.

Per-editor storage roots

Use disk together with base-path to give each editor its own exact storage root. The file browser presents that path as / and cannot navigate above it:

The equivalent Filament configuration supports closures:

The older directory option remains supported. When base-path is omitted, it is appended below the global jodit.base_path. An explicit base-path takes precedence over directory. If user_directory is enabled, its user segment is appended to the resulting root in both cases.

The bundled connector receives the effective disk and root through an opaque, encrypted storage_scope. Keep require_storage_scope enabled so request parameters cannot be changed to access another disk or root. Disable it only temporarily for a legacy client that does not use the package components.

Component Props

Passing buttons

You can pass the buttons prop as a PHP array (:buttons=), a JSON string, or a PHP-style array string:

Use extra-buttons to extend the explicit button list or selected/default profile:

Common toolbar examples

Use align when you want a single alignment dropdown instead of separate left, center, right, and justify buttons:

Use the package's richer toolbar profile when you want the full button set:

Custom languages

Register one or more standalone JavaScript language files globally. Local asset paths and absolute URLs are supported:

A standalone language file registers its translations after Jodit is loaded:

The configured language is used globally. You can also select a registered language for an individual Blade editor:

Or for a Filament field:

Language scripts are loaded once per page, after Jodit and before custom plugins and editor initialization. Jodit's repository files, such as src/langs/cs_cz.js, are source modules with internal imports and may not work directly in a browser. Use a browser-ready build or a standalone file that registers the dictionary through Jodit.lang.

Custom plugins

Register one or more standalone JavaScript plugin files globally:

Each file must register its plugin after Jodit is loaded:

Plugin scripts are loaded once per page before the editors are initialized. Disable a globally registered plugin for a specific Blade editor with:

Or for a Filament field:

Configuration

Presets and per-editor options

Keep toolbar button sets in profiles. Use presets for reusable Jodit options and config for options needed by only one editor:

Options are resolved as global defaults, selected preset, per-instance config, and finally explicit props or field methods such as height(). Nested maps are merged recursively; list values are replaced in full. An unknown preset falls back to the defaults and writes a warning to the Laravel log.

Static configuration after publishing config/jodit.php

Dynamic configuration with Vite assets

When language files, editor styles, or custom plugins are built by Vite, their final URLs contain generated filenames and cannot be stored directly in config/jodit.php. Resolve them from the Vite manifest in custom service provider JoditEditorServiceProvider and set the Jodit configuration at runtime:

Make sure every path passed to $vite->asset() is included in your Vite build inputs, either directly or through an imported dependency. The example enables iframe mode to prevent conflicts between application styles (for example, Tailwind CSS and Bootstrap) and loads custom jodit-editor-content.scss styles inside the iframe.

Registering the connector under a custom route

If you want the connector to live under your admin prefix with your own middleware, disable the package route and register it yourself:

Then tell the component which route to use:

Or set a global default in config/jodit.php:

Buttons Reference

Use any of the names below in your buttons array. Use | as a visual separator between groups.

Text Formatting

Alignment

Lists & Indentation

Block / Typography

Insert

Clipboard & History

View / Utility

Separators

Example — compact toolbar:

Example — full editing toolbar:

File Manager Backends

The file_manager.backend config key controls which file manager is wired up when file-browser="true" (the default).

builtin (default)

Uses the package's own connector controller. No extra packages required.

custom

Point the editor at any server-side connector that speaks Jodit's filebrowser protocol. Pass the URL via the component's connector-url prop, or set route.name in the config:

License & credits

This project is licensed under the MIT License.

It is an independently maintained fork of nasirkhan/laravel-jodit and builds upon the work of its original authors and contributors.