How To Install And Use CKEditor In Laravel

Do you want to install CKEditor in Laravel? CKEditor is a WYSIWYG HTML editor which allows us to write rich text formats. In this article, we show you how to install and use CKEditor in Laravel.

Why Need To Use CKEditor?

HTML provides a textarea element for writing description. But, textarea comes with some limitations. In textarea, it’s not easy and user-friendly to write other HTML elements like p, div, img, etc.

To overcome such limitations, we can use CKEditor which itself is a rich text editor. Our final output will look like the below screenshot.

Laravel CKEditor

As we are going to show how to use and install and CKEditor in Laravel, so we discuss about Laravel package for CKEditor library.

If you wish to use CKEdiotr apart from Laravel, then please check the official website for CKEditor.

Install CKEditor In Laravel

To install CKEditor in Laravel, open the command prompt in your project root directory and run the below command.

composer require unisharp/laravel-ckeditor

Above command will install CKEditor packages in your project’s vendor directory.

Next, open your config/app.php and place the below line to the providers array.

Unisharp\Ckeditor\ServiceProvider::class,

After the above steps, run the below command which copies some of the files and folders from ‘vendor\unisharp\laravel-ckeditor’ to ‘public\vendor\unisharp\laravel-ckeditor’.

php artisan vendor:publish --tag=ckeditor

How To Use CKEditor

At this stage, we have completed the steps for installing the CKEditor package. Now let’s see how to use the CKEditor.

Let’s say we have a textarea which should get replaced by CKEditor. To do so we are adding id ‘summary-ckeditor’ to the textarea.

<textarea class="form-control" id="summary-ckeditor" name="summary-ckeditor"></textarea>

Next, we need to include ckeditor.js file and write a JavaScript code which replaces textarea with CKEditor.

<script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
<script>
    CKEDITOR.replace( 'summary-ckeditor' );
</script>

Above JavaScript code replaces textarea with the CKEditor.

Upload and Insert Image in CKEditor

CKEditor by default does not give the option to upload the image from your computer. If someone looking to give this option then read on. It needs to add a route, image upload and some JavaScript code to our application. At first, to enable image upload option you need to call CKEditor in the following way.

<script>
    CKEDITOR.replace( 'summary-ckeditor', {
        filebrowserUploadUrl: "{{route('upload', ['_token' => csrf_token() ])}}",
        filebrowserUploadMethod: 'form'
    });
</script>

Here for the key filebrowserUploadUrl we pass the route URL and csrf token. We will define this route in the next step. Now if you click on CKEditor’s image icon you will see image upload option.

Image Upload in CKEditor

Let’s define the route and a controller’s method which upload and insert the image.

Route::post('ckeditor/image_upload', '[email protected]')->name('upload');

To use uploaded image in CKEditor we need to upload the image in our application folder and send back an image URL. For storing an image on a server, we’ll use Laravel storage feature where we create a symlink of a ‘storage’ folder. To create a symlink, run the command:

php artisan storage:link

Next create a controller CKEditorController and define upload method in it as follows:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CKEditorController extends Controller
{
	public function upload(Request $request)
	{
	    if($request->hasFile('upload')) {
	        //get filename with extension
	        $filenamewithextension = $request->file('upload')->getClientOriginalName();
	 
	        //get filename without extension
	        $filename = pathinfo($filenamewithextension, PATHINFO_FILENAME);
	 
	        //get file extension
	        $extension = $request->file('upload')->getClientOriginalExtension();
	 
	        //filename to store
	        $filenametostore = $filename.'_'.time().'.'.$extension;
	 
	        //Upload File
	        $request->file('upload')->storeAs('public/uploads', $filenametostore);

	        $CKEditorFuncNum = $request->input('CKEditorFuncNum');
	        $url = asset('storage/uploads/'.$filenametostore); 
	        $msg = 'Image successfully uploaded'; 
	        $re = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
	        
	        // Render HTML output 
	        @header('Content-type: text/html; charset=utf-8'); 
	        echo $re;
	    }
	}
}

That’s it now try to upload the image from CKEditor’s built-in image option and you will get the image added in your editor.

We hope you understand how to install and use CKEditor in Laravel. For any questions or suggestions please leave a comment below.

If you liked this article, then please subscribe to our Youtube Channel for video tutorials.

29 thoughts on “How To Install And Use CKEditor In Laravel

  1. I save the images to the Storage folder and they are physically deposited there, already run in CMD $ php artisan storage: link, the folder pointing to storage was created, but even so when I enter the URL of the uploaded image it marks me 404 error, I’m sure the route is correct

  2. Not Found
    The requested URL /blog/ckeditor/image_upload was not found on this server.

    Apache Server at localhost Port 80

    1. I don’t have their full package so never tested with it. But I believe you need to copy files, folders from your full package to public/vendor/unisharp/laravel-ckeditor directory.

    1. Image upload feature does not come default in CKEditor. It needs customization. We’ll try to publish an article on this topic soon.

  3. hello
    editor worked and save data in database , but when i want show text on front page . show html tag in page
    like ” some ting ”
    don’t hidden html tag .
    how i can fix that problem ?

  4. i use ck editor for in laravel but i have a problem is aries . all the tag are display in the view hoe to hide such display tab in my view page

  5. The Editor works okay but is saving the HTML tags as well to the Database. Is there a way to trim of the HTML tags when rendering the Database response in the blade view?

  6. i keep on getting this error
    Class ‘Unisharp\Ckeditor\ServiceProvider::class’ not found
    how can this be fixed?

Leave a Reply

Your email address will not be published. Required fields are marked *