Get unlimited public & private packages + team-based management with npm Teams.Learn more »

ckeditor5-build-laravel-image

1.0.1 • Public • Published

ckeditor5-build-laravel-image

npm version

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:

Added the following features:

Added from the Basic text styles feature:

  • Underline
  • Strikethrough
  • Subscript
  • Superscript
  • Code

Install

npm i ckeditor5-build-laravel-image

DownloadsWeekly Downloads

3

Version

1.0.1

License

MIT

Unpacked Size

4.56 MB

Total Files

62

Last publish

Collaborators

  • avatar