Polyscope - The agent-first dev environment for Laravel

Nova Ckeditor4 Field

waynestate/nova-ckeditor4-field image

Nova Ckeditor4 Field stats

Downloads
496.4K
Stars
61
Open Issues
3
Forks
20

View on GitHub →

This nova package allows you to use CKEditor 4 for text areas.

Laravel Nova CKEditor 4 Field

This nova package allows you to use CKEditor 4 for text areas using Nova v4.

Installation

Nova v1, v2, v3 compatibility instructions

You can install the package into a Laravel application that uses Nova via composer:

composer require waynestate/nova-ckeditor4-field

By default the CKEditor 4 instance used is the latest (4.21.0) Full All version (https://cdn.ckeditor.com/). If you wish to use a different CKEditor 4 you can do so by publishing and editing the configuration.

Usage

<?php
 
namespace App\Nova;
 
use Waynestate\Nova\CKEditor4Field\CKEditor;
 
class Article extends Resource
{
// ...
 
public function fields(Request $request)
{
return [
// ...
 
CKEditor::make('Body', 'body');
 
// ...
];
}
}

Overriding Config Values

To change any of config values, publish a config file:

php artisan vendor:publish --tag=nova-ckeditor4-field-config

Customization

Configuration options

You can change the configuration options of the CKEditor instance by either editing the published config file at nova.ckeditor-field.options

/*
|--------------------------------------------------------------------------------
| CKEditor Options
|--------------------------------------------------------------------------------
|
| To view a list of all available options checkout the CKEditor API documentation
| https://ckeditor.com/docs/ckeditor4/latest/api/CKEDITOR_config.html
|
*/
'options' => [
'toolbar' => [
['Source','-','Cut','Copy','Paste','PasteText','PasteFromWord','-','Print', 'SpellChecker', 'Scayt'],
['Undo','Redo','-','Find','Replace','-','SelectAll','RemoveFormat'],
['Image','Table','HorizontalRule','SpecialChar','PageBreak'],
'/',
['Bold','Italic','Strike','-','Subscript','Superscript'],
['NumberedList','BulletedList','-','Outdent','Indent','Blockquote','CreateDiv'],
['JustifyLeft','JustifyCenter','JustifyRight'],
['Link','Unlink','Anchor'],
'/',
['Format','FontSize'],
['Maximize', 'ShowBlocks','-','About']
]
],

or you can pass it with the options method using:

public function fields(Request $request)
{
return [
// ...
 
CKEditor::make('Body', 'body')->options([
'height' => 300,
'toolbar' => [
['Source','-','Cut','Copy','Paste'],
],
]),
 
// ...
];
}

File Uploads

The nova-ckeditor4-field allows the use of file uploads by extending the attachment functionality of the Trix field

php artisan vendor:publish --tag=nova-ckeditor4-field-config # Make sure the config file is published
php artisan migrate # Run the migrations

The package migrations will automatically run when running php artisan migrate.

If you are not going to use the Files and have no need for the migrations, you can disable migrations in config/nova/ckeditor-field.php, set the enable_migrations to false.

'migrations' => [
'enable_migrations' => false,
// ...
],

If you do not wish to use the Laravel Migration, but publish the migration yourself to your project. Within the published /config/nova/ckeditor-field.php, set the auto_migrate to false.

'migrations' => [
'enable_migrations' => true,
'auto_migrate' => false,
],

and then publish the migration to your project.

php artisan vendor:publish --tag=nova-ckeditor4-field-migrations

if you wish to not use the default Attachment and/or PendingAttachment models. You could replace with your own within the published /config/nova/ckeditor-field.php,

'attachment_model' => \Waynestate\Nova\CKEditor4Field\Models\Attachment::class,
'pending_attachment_model' => \Waynestate\Nova\CKEditor4Field\Models\PendingAttachment::class,

Using the File Uploads feature requires that the CKEditor uses the plugins Enhanced Image (image2) and UploadImage. If they are not included within your configuration, they will be added automatically.

Like the Trix field you'll be able to chain the method withFiles onto the field's definition, while passing the name of the filesystem disk where the images should be stored:

use Waynestate\Nova\CKEditor4Field\CKEditor;
 
CKEditor::make('Body')->withFiles('public');

Also to prune any stale attachments from the storage and table, you'll want to register a job to run periodically:

use Waynestate\Nova\CKEditor4Field\Jobs\PruneStaleAttachments;
 
/**
* Define the application's command schedule.
*
* @param \Illuminate\Console\Scheduling\Schedule $schedule
* @return void
*/
protected function schedule(Schedule $schedule)
{
$schedule->call(function () {
(new PruneStaleAttachments)();
})->daily();
}

Limitations using File Uploads

Images are not removed from the filesystem when they are removed from the editor. For the time being you'll need to rectrify this on your own.

Custom CKEditor Instance

If you wish to not use the CKEditor from the CKEditor CDN, you can change the ckeditor_url under config/nova/ckeditor-field.php to point to the URL of the CKEditor you wish to use.

If you wish to go the route of a Custom CKEditor Instance using Composer then follow the steps at Using Composer for Custom CKEditor Instance

Nova v1, v2, or v3 compatibility

If you require the use of nova-ckeditor4-field using Nova v1, v2 or v3, you can install using version 0.7.0

composer require waynestate/nova-ckeditor4-field:"^0.7.0"

Changelog

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

Contributing

Please see CONTRIBUTING for details.

Security

If you discover any security related issues, please email web@wayne.edu instead of using the issue tracker.

Credits

License

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

waynestate photo

A premier research university serving a diverse body of motivated students in vibrant Midtown, the cultural center of Detroit.

Cube

Laravel Newsletter

Join 40k+ other developers and never miss out on new tips, tutorials, and more.


Waynestate Nova Ckeditor4 Field Related Articles

Laravel Mobile Pass: Generate Apple Wallet and Google Wallet Passes image

Laravel Mobile Pass: Generate Apple Wallet and Google Wallet Passes

Read article
Laravel API Starter Kits Are Coming Soon! image

Laravel API Starter Kits Are Coming Soon!

Read article
AI Generative Engine Optimization for Laravel image

AI Generative Engine Optimization for Laravel

Read article
FormRequest Strict Mode and Queue Job Inspection in Laravel 13.4.0 image

FormRequest Strict Mode and Queue Job Inspection in Laravel 13.4.0

Read article
Ship AI with Laravel: Smart Ticket Triage with Structured Output image

Ship AI with Laravel: Smart Ticket Triage with Structured Output

Read article
Laravel USPS: A Modern Wrapper for the USPS API image

Laravel USPS: A Modern Wrapper for the USPS API

Read article
Lucky Media logo

Lucky Media

Get Lucky Now - the ideal choice for Laravel Development, with over a decade of experience!

Lucky Media
Harpoon: Next generation time tracking and invoicing logo

Harpoon: Next generation time tracking and invoicing

The next generation time-tracking and billing software that helps your agency plan and forecast a profitable future.

Harpoon: Next generation time tracking and invoicing
Blastup logo

Blastup

Blastup provides social media enhancement services including buying Instagram likes, followers, and views, with features like instant delivery and a variety of packages to suit different needs.

Blastup
LoadForge logo

LoadForge

Scalable load testing for web apps & APIs. Simulate real-world traffic and identify breaking points and performance limits with powerful, scalable load tests designed for Laravel.

LoadForge
Honeybadger logo

Honeybadger

Simple developer-focused application monitoring for Laravel. Error tracking, log management, uptime monitoring, status pages, and more!

Honeybadger
Celebian logo

Celebian

Celebian is a social media marketing agency specializing in helping their clients go viral on TikTok. Whether you're looking to reach a bigger audience or gain more Tiktok followers, likes, and views, they've got you covered.

Celebian