Download the PHP package wrteam/filament-ckeditor-field without Composer

Filament CKEditor Field

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:

You can publish the config file with:

Usage

Basic usage:

Full example with all options:

Configuration

This is the contents of the published config file:

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:

Responsive images response:

Example Laravel Controller:

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)

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)

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

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.