nakipelo / orchid-ckeditor
CKEditor editor for Laravel Orchid
Installs: 6 761
Dependents: 0
Suggesters: 0
Security: 0
Stars: 6
Watchers: 1
Forks: 8
Open Issues: 4
Requires
- php: ^8.1
- ext-json: *
- orchid/platform: ^14.0
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 instancesetOptions(array $options): CKEditor
- Set editor optionsmergeOptions(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 controllerdata-ckeditor-id-value
- Field IDdata-ckeditor-options-value
- JSON editor optionsdata-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.