ckeditor5-build-laravel-image

Custom CKEditor 5 Classic build with support for uploading images to a Laravel endpoint. It provides the configurations needed by Laravel for CSRF protection.

This build is based on ckeditor5-build-classic and uses the ckeditor5-simple-upload plugin to upload the images to the Laravel application.

Laravel has a CSRF protection, so you have to send a CSRF token or add an exception to the VerifyCsrfToken middleware (not recommended).

Installation

npm i ckeditor5-build-laravel-image

Usage

First, you have to set your token in a meta tag:

<meta name="csrf-token" content="{{ csrf_token() }}">

Then, you can create an instance of the editor:

ClassicEditor.create(document.querySelector('#editor'), {
  simpleUpload: {
    uploadUrl: {
      url: 'http://localhost:9000/my-laravel-endpoint'
    }
  }
}).then(editor => {
  console.log('Editor created successfully!');
}).catch(err => {
  console.error(err.stack);
});

Where simpleUpload.uploadUrl.url is the URL of your Laravel endpoint that manages the image upload.

Laravel endpoint

The endpoint requirements are the same as the ckeditor5-simple-upload plugin.

The endpoint will expect a file called upload and should return a response depending of the status.

Success response

{
  "uploaded": true,
  "url": "http://127.0.0.1/uploaded-image.jpeg"
}

Failure response

{
  "uploaded": false,
  "error": {
      "message": "could not upload this image"
  }
}

Features

This build includes almost the same as ckeditor5-build-classic, but with the following differences.

Removed:

• UploadAdapter
• CKFinder
• EasyImage

Added the following features:

• Block indentation
• Text alignment

Added from the Basic text styles feature:

• Underline
• Strikethrough
• Subscript
• Superscript
• Code