README

CKEditor 4 integration with Laravel Orchid Platform for creating rich text editors in the admin panel.

Important: This package uses CKEditor 4.22.1, which is the last free version. All subsequent versions (4.23+) are LTS versions that require a commercial license purchase.

Features

✅ Full integration with Laravel Orchid Platform
✅ CKEditor 4.22.1 (last free version) with file upload support
✅ Laravel File Manager integration
✅ Stimulus controller for modern JavaScript
✅ Customizable editor options
✅ CSRF token support
✅ Automatic asset publishing

Requirements

PHP ^8.1
Laravel Orchid ^14.0
Laravel File Manager (optional)

Installation

1. Install via Composer

composer require nakipelo/orchid-ckeditor

2. Publish Assets

php artisan vendor:publish --provider="Nakipelo\Orchid\CKEditor\CKEditorServiceProvider"

3. Publish Configuration (optional)

php artisan vendor:publish --tag=ckeditor-config

Usage

Basic Usage

use Nakipelo\Orchid\CKEditor\CKEditor;

// In your Screen class
public function fields(): array
{
    return [
        CKEditor::make('content')
            ->title('Content')
            ->required(),
    ];
}

Advanced Usage with Custom Options

use Nakipelo\Orchid\CKEditor\CKEditor;

public function fields(): array
{
    return [
        CKEditor::make('content')
            ->title('Content')
            ->setOptions([
                'toolbar' => [
                    ['Bold', 'Italic', 'Underline'],
                    ['NumberedList', 'BulletedList'],
                    ['Link', 'Unlink'],
                    ['Image', 'Table'],
                ],
                'height' => 300,
            ])
            ->mergeOptions([
                'filebrowserImageBrowseUrl' => '/filemanager?type=Images',
                'filebrowserImageUploadUrl' => '/filemanager/upload?type=Images&_token=' . csrf_token(),
            ]),
    ];
}

Configuration

After publishing the configuration, the config/ckeditor.php file will contain:

return [
    /**
     * URL for loading CKEditor
     */
    'editorUrl' => '//cdn.ckeditor.com/4.22.1/full/ckeditor.js',

    /**
     * Default editor options
     */
    'options' => [
        'filebrowserImageBrowseUrl' => '/filemanager?type=Images',
        'filebrowserImageUploadUrl' => '/filemanager/upload?type=Images&_token=',
        'filebrowserBrowseUrl' => '/filemanager?type=Files',
        'filebrowserUploadUrl' => '/filemanager/upload?type=Files&_token=',
    ]
];

File Manager Setup

For file management, it's recommended to use Laravel File Manager:

composer require unisharp/laravel-filemanager:^2.2

Then add routes to routes/web.php:

Route::group(['prefix' => 'filemanager', 'middleware' => ['web', 'auth']], function () {
    \UniSharp\LaravelFilemanager\Lfm::routes();
});

API

CKEditor Class

Methods

make(?string $name = null): static - Create a new instance
setOptions(array $options): CKEditor - Set editor options
mergeOptions(array $options): CKEditor - Merge with existing options

Options Examples

$editor = CKEditor::make('content')
    ->setOptions([
        'toolbar' => [
            ['Bold', 'Italic', 'Underline'],
            ['NumberedList', 'BulletedList'],
            ['Link', 'Unlink'],
            ['Image', 'Table'],
            ['Source'],
        ],
        'height' => 400,
        'width' => '100%',
        'language' => 'en',
        'uiColor' => '#f0f0f0',
        'removeDialogTabs' => 'image:advanced;link:advanced',
    ]);

JavaScript API

The package uses a Stimulus controller ckeditor with the following capabilities:

Data Attributes

data-controller="ckeditor" - Activate controller
data-ckeditor-id-value - Field ID
data-ckeditor-options-value - JSON editor options
data-ckeditor-editor-url-value - URL for loading CKEditor

Events

The controller automatically handles:

Editor content changes
CSRF tokens for file uploads
Source/visual mode switching
Fullscreen mode closing on navigation

Development

Install Dependencies

npm install

Build Assets

npm run dev
# or for production
npm run production

Project Structure

src/
├── CKEditor.php              # Main field class
└── CKEditorServiceProvider.php # Service Provider

resources/js/
├── ckeditor.js               # Stimulus entry point
└── ckeditor_controller.js    # Stimulus controller

views/
└── field.blade.php           # Blade field template

config/
└── config.php                # Default configuration

License

MIT License. See the LICENSE file for details.

Author

Egor Gruzdev

Email: egorgruzdev@gmail.com

Support

If you have questions or suggestions, please create an Issue in the project repository.

Changelog

See CHANGELOG.md for a list of changes.

Note: This package uses CKEditor 4.22.1, which is the last free version. All subsequent versions (4.23+) are LTS versions that require a commercial license purchase. For CKEditor 5 usage, consider other solutions or create a fork with updated integration.

nakipelo / orchid-ckeditor

Maintainers

Details