wrteam/filament-ckeditor-field

A basic CKEditor 5 form field configured with non-premium features.

v2.0.1-beta 2025-11-24 00:49 UTC

Requires

• php: ^8.2|^8.3
• filament/forms: ^3.0|^4.0
• spatie/laravel-package-tools: ^1.15.0

Requires (Dev)

• nunomaduro/collision: ^8.1
• orchestra/testbench: ^8.0|^9.0|^10.0
• pestphp/pest: ^3.0|^4.0
• pestphp/pest-plugin-arch: ^3.0
• pestphp/pest-plugin-laravel: ^3.0
• phpstan/phpstan: ^2.1

MIT

• Thomas Johnson

• laravel
• Kahu-Software-LLC
• kahusoftware
• filament-ckeditor-field

README

Branches: master (stable) | dev (development) — Supports FilamentPHP 4.x and 5.x.

Features

• CKEditor 5 integration for FilamentPHP 4 & 5 forms
• Image upload support with configurable upload URLs
• Full control over image upload handling - you implement your own upload endpoint
• Configurable editor height
• HTML preview toggle to verify rendered output
• Highly customizable with fluent API
• Non-premium features only (free and open-source)
• Easy to configure and use

Table of contents

• Filament CKEditor Field
• Features
• Table of contents
• Installation
• Usage
• Configuration
  • Available methods
    • uploadUrl(string | Closure | null $uploadUrl)
    • height(string $height)
    • preview(bool $showPreview)
    • name(string $name)
    • placeholder(string $placeholder)
• Testing
• Changelog
• Contributing
• Security Vulnerabilities
• Credits
• License

Installation

You can install the field via composer:

composer require wrteam/filament-ckeditor-field

You can publish the config file with:

php artisan vendor:publish --tag="filament-ckeditor-field-config"

Usage

Basic usage:

use Wrteam\FilamentCkeditorField\CKEditor;

CKEditor::make('content')
    ->uploadUrl(null)

Full example with all options:

use Wrteam\FilamentCkeditorField\CKEditor;

CKEditor::make('content')
    ->label('Content')
    ->required()
    ->uploadUrl('/api/upload-image')
    ->height('400px')
    ->preview()
    ->placeholder('Start writing your content...')
    ->columnSpanFull()

Configuration

This is the contents of the published config file:

return [
    /**
     * Image upload enabled
     */
    'upload_enabled' => true,

    /**
     * Image URL to upload to if one is not specified on the form field's ->uploadUrl() method
     */
    'upload_url' => null,
];

Available methods

uploadUrl(string | Closure | null $uploadUrl)

Sets the URL endpoint for image uploads. If not specified, the default upload URL from the config file will be used.

uploadUrl (Default: null)

Note: This field gives you freedom to handle image uploads yourself. You are responsible for creating your own upload endpoint that handles file validation, storage, and returns the appropriate response format. This design allows you to implement your own business logic, security measures, and storage solutions (local filesystem, S3, cloud storage, etc.).

This field uses CKEditor's Custom Upload Adapter, which requires your upload endpoint to return a JSON response containing the uploaded image URL(s).

Expected Response Format:

Your upload endpoint must return a JSON response with one of the following formats:

Single image response:

{
    "url": "https://example.com/uploads/image.jpg"
}

Responsive images response:

{
    "urls": {
        "default": "https://example.com/uploads/image.jpg",
        "500": "https://example.com/uploads/image1.jpg",
        "1000": "https://example.com/uploads/image2.jpg"
    }
}

Example Laravel Controller:

use Illuminate\Http\Request;

public function uploadImage(Request $request)
{
    $request->validate([
        'upload' => 'required|image|max:2048',
    ]);

    $path = $request->file('upload')->store('uploads', 'public');
    $url = asset('storage/' . $path);

    return response()->json([
        'url' => $url
    ]);
}

For more details, see the CKEditor Custom Upload Adapter documentation.

height(string $height)

Sets a fixed height for the editor area. Accepts any valid CSS height value.

height (Default: null — auto-expanding)

CKEditor::make('content')
    ->height('300px')   // compact
    ->height('500px')   // medium
    ->height('800px')   // tall

preview(bool $showPreview)

Enables a "Show Preview" toggle button below the editor. When clicked, it displays the rendered HTML output in a read-only panel — useful for verifying how content will look when displayed on the frontend.

preview (Default: false)

CKEditor::make('content')
    ->preview()

The preview panel:

• Updates in real-time as you type
• Renders HTML with proper styling (Tailwind prose)
• Supports dark mode
• Can be toggled on/off by the user

name(string $name)

Sets the name of the field. This will be used as the form field name.

name (Default: 'ckeditor')

placeholder(string $placeholder)

Sets the placeholder text displayed in the editor when it's empty.

placeholder (Default: 'Type or paste your content here...')

Testing

composer test

The test suite uses PestPHP and includes unit tests for field instantiation, method chaining, and configuration, as well as feature tests for rendering the field within Livewire components.

Changelog

Please see CHANGELOG for more information on what has changed recently.

Contributing

Please see CONTRIBUTING for details.

Security Vulnerabilities

If you discover a security vulnerability, please report it via GitHub Issues to ensure it is promptly addressed.

Credits

• Meet (wrteam)
• All Contributors

License

The MIT License (MIT). Please see License File for more information.

* This open-source plugin is not affiliated with, endorsed, or sponsored by CKSource, and any references to CKEditor are solely for descriptive purposes under their respective copyrights and trademarks.

We do encourage you to check out CKEditor's premium features for your own implementation of CKEditor as the developers have worked hard to bring us a wonderful rich editor.