PHPackages                             wrteam/filament-ckeditor-field - PHPackages - PHPackages  [Skip to content](#main-content)[PHPackages](/)[Directory](/)[Categories](/categories)[Trending](/trending)[Leaderboard](/leaderboard)[Changelog](/changelog)[Analyze](/analyze)[Collections](/collections)[Log in](/login)[Sign up](/register)

1. [Directory](/)
2. /
3. [Utility & Helpers](/categories/utility)
4. /
5. wrteam/filament-ckeditor-field

ActiveLibrary[Utility & Helpers](/categories/utility)

wrteam/filament-ckeditor-field
==============================

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

v3.0.0(1mo ago)469MITPHP ^8.2|^8.3

Since Sep 30Compare

[ Source](https://github.com/meet-wrteam/filament-ckeditor-field)[ Packagist](https://packagist.org/packages/wrteam/filament-ckeditor-field)[ Docs](https://github.com/meet-wrteam/filament-ckeditor-field)[ RSS](/packages/wrteam-filament-ckeditor-field/feed)WikiDiscussions Synced 3w ago

READMEChangelog (1)Dependencies (16)Versions (32)Used By (0)

Filament CKEditor Field
=======================

[](#filament-ckeditor-field)

[![Latest Version on Packagist](https://camo.githubusercontent.com/383db25b096b2e087a0f667f5c3ff79d6b424707f58358ed0db1a17a6a423b4a/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f762f77727465616d2f66696c616d656e742d636b656469746f722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wrteam/filament-ckeditor-field)[![GitHub Tests Action Status](https://camo.githubusercontent.com/2093a91ebdc3d124224777d066693b3a98677d7fe593ce47ec4920310dba47de/68747470733a2f2f696d672e736869656c64732e696f2f6769746875622f616374696f6e732f776f726b666c6f772f7374617475732f6d6565742d77727465616d2f66696c616d656e742d636b656469746f722d6669656c642f72756e2d74657374732e796d6c3f6272616e63683d6d6173746572266c6162656c3d7465737473267374796c653d666c61742d737175617265)](https://github.com/meet-wrteam/filament-ckeditor-field/actions?query=workflow%3Arun-tests+branch%3Amaster)[![Total Downloads](https://camo.githubusercontent.com/dbc5b201322d4d3998a096e97539803ea83ec4ec372bc99a0f92a7fb624f799e/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f64742f77727465616d2f66696c616d656e742d636b656469746f722d6669656c642e7376673f7374796c653d666c61742d737175617265)](https://packagist.org/packages/wrteam/filament-ckeditor-field)[![License](https://camo.githubusercontent.com/2571a042e9028be8f2a76eabcb5f48753ef36bd0510c08e089c925d13ba629c3/68747470733a2f2f696d672e736869656c64732e696f2f7061636b61676973742f6c2f77727465616d2f66696c616d656e742d636b656469746f722d6669656c642e7376673f7374796c653d666c61742d737175617265)](LICENSE.md)

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

Features
========

[](#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
=================

[](#table-of-contents)

- [Filament CKEditor Field](#filament-ckeditor-field)
- [Features](#features)
- [Table of contents](#table-of-contents)
- [Installation](#installation)
- [Usage](#usage)
- [Configuration](#configuration)
    - [Available methods](#available-methods)
        - [uploadUrl(`string` | `Closure` | `null` $uploadUrl)](#uploadurlstring--closure--null-uploadurl)
        - [height(`string` $height)](#heightstring-height)
        - [preview(`bool` $showPreview)](#previewbool-showpreview)
        - [name(`string` $name)](#namestring-name)
        - [placeholder(`string` $placeholder)](#placeholderstring-placeholder)
- [Testing](#testing)
- [Changelog](#changelog)
- [Contributing](#contributing)
- [Security Vulnerabilities](#security-vulnerabilities)
- [Credits](#credits)
- [License](#license)

Installation
============

[](#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
=====

[](#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
=============

[](#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
-----------------

[](#available-methods)

### uploadUrl(`string` | `Closure` | `null` $uploadUrl)

[](#uploadurlstring--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](https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html), 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](https://ckeditor.com/docs/ckeditor5/latest/framework/deep-dive/upload-adapter.html#passing-additional-data-to-the-response).

### height(`string` $height)

[](#heightstring-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)

[](#previewbool-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)

[](#namestring-name)

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

`name` (Default: `'ckeditor'`)

### placeholder(`string` $placeholder)

[](#placeholderstring-placeholder)

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

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

Testing
=======

[](#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
=========

[](#changelog)

Please see [CHANGELOG](CHANGELOG.md) for more information on what has changed recently.

Contributing
============

[](#contributing)

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

Security Vulnerabilities
========================

[](#security-vulnerabilities)

If you discover a security vulnerability, please report it via [GitHub Issues](https://github.com/meet-wrteam/filament-ckeditor-field/issues) to ensure it is promptly addressed.

Credits
=======

[](#credits)

- [Meet (wrteam)](https://github.com/meet-wrteam)
- [All Contributors](../../contributors)

License
=======

[](#license)

The MIT License (MIT). Please see [License File](LICENSE.md) 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.

###  Health Score

48

—

FairBetter than 94% of packages

Maintenance94

Actively maintained with recent releases

Popularity16

Limited adoption so far

Community2

Small or concentrated contributor base

Maturity66

Established project with proven stability

How is this calculated?**Maintenance (25%)** — Last commit recency, latest release date, and issue-to-star ratio. Uses a 2-year decay window.

**Popularity (30%)** — Total and monthly downloads, GitHub stars, and forks. Logarithmic scaling prevents top-heavy scores.

**Community (15%)** — Contributors, dependents, forks, watchers, and maintainers. Measures real ecosystem engagement.

**Maturity (30%)** — Project age, version count, PHP version support, and release stability.

###  Release Activity

Cadence

Every ~35 days

Total

19

Last Release

32d ago

Major Versions

v0.0.7-alpha → v2.0.0-beta2025-11-13

v1.0.2 → v2.0.1-beta2025-11-24

v1.0.4 → 2.x-dev2026-05-05

v2.0.0 → v3.0.02026-06-22

PHP version history (2 changes)v0.0.1-alphaPHP ^8.1

v2.0.1-betaPHP ^8.2|^8.3

### Community

Maintainers

![](https://avatars.githubusercontent.com/u/200352715?v=4)[Meet Bhalodia](/maintainers/meet-wrteam)[@meet-wrteam](https://github.com/meet-wrteam)

---

Tags

laravelfilament-ckeditor-fieldwrteam

###  Code Quality

TestsPest

Static AnalysisPHPStan

Type Coverage Yes

### Embed Badge

![Health badge](/badges/wrteam-filament-ckeditor-field/health.svg)

```
[![Health](https://phpackages.com/badges/wrteam-filament-ckeditor-field/health.svg)](https://phpackages.com/packages/wrteam-filament-ckeditor-field)
```

###  Alternatives

[codewithdennis/filament-select-tree

The multi-level select field enables you to make single selections from a predefined list of options that are organized into multiple levels or depths.

330530.5k30](/packages/codewithdennis-filament-select-tree)[awcodes/richer-editor

A collection of extensions and tools to enhance the Filament Rich Editor field.

3913.8k9](/packages/awcodes-richer-editor)[rawilk/filament-password-input

Enhanced password input component for filament.

52263.4k15](/packages/rawilk-filament-password-input)[schmeits/filament-character-counter

This is a Filament character counter TextField and Textarea form field for Filament v4 and v5

34226.4k14](/packages/schmeits-filament-character-counter)[biostate/filament-menu-builder

An Elegant Menu Builder for FilamentPHP

6528.1k2](/packages/biostate-filament-menu-builder)[codebar-ag/laravel-filament-json-field

A Laravel Filament JSON Field integration with CodeMirror support

1126.6k](/packages/codebar-ag-laravel-filament-json-field)

PHPackages © 2026

[Directory](/)[Categories](/categories)[Trending](/trending)[Changelog](/changelog)[Analyze](/analyze)