Do you want to install CKEditor in Laravel? CKEditor is a WYSIWYG(what you see is what you get) HTML editor that allows you to write rich text formats. In this article, I show you how to install and use CKEditor in Laravel. I will also explain how one can upload images in CKEditor.

This tutorial will be focused on adding CKEditor 4 in Laravel. For the integration of CKEditor 5, refer to our article on how to use CKEditor 5 in Laravel.

Why Need to Use CKEditor?

A rich text editor is necessary to write rich content for your pages or articles. On the website, we need to have different elements like images, paragraphs, links, etc. All these different elements can be easily added using the CKEditor.

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

To overcome such limitations, you can use CKEditor which itself is a rich text editor. It allows us to insert HTML elements between content. Below is the screenshot of how the CKEditor appears on a page.

Install CKEditor in Laravel

There are 2 ways to install CKEditor in Laravel – via CDN or using the CKEditor’s package. Both resources are available on the CKEditor’s download page.

The CDN link is //cdn.ckeditor.com/4.21.0/standard/ckeditor.js. If you choose CDN, you don’t need to download anything from the CKEditor’s website.

To install CKEditor without CDN, download the package(Standard Package recommended) on your machine. Next, create a folder ckeditor under the public directory of your Laravel project. And inside this ckeditor folder copy below files and folders from the downloaded package.

How to Use CKEditor in Laravel

After completing the previous step, you are ready with your CKEditor’s package. Now let’s see how to use the CKEditor.

Let’s say you have a Text area that should get replaced by CKEditor. To do so I am adding an id  editor to the  textarea.

<textarea id="editor" name="editor"></textarea>

Next, you need to include ckeditor.js file and write a JavaScript code that replaces this textarea with CKEditor.

<script src="{{ asset('ckeditor/ckeditor.js') }}"></script>
<script>
CKEDITOR.replace( 'editor' );
</script>

Above JavaScript code convert your textarea into the CKEditor. In order to use CDN the code would be as follow:

<script src="//cdn.ckeditor.com/4.21.0/standard/ckeditor.js"></script>
<script>
CKEDITOR.replace( 'editor' );
</script>

Your CKEditor is ready. You can now add your rich content to the editor and use it on your website. To get the content of CKEditor use the statement below.

$content = $request->input('editor');

And to pre-fill the CKEditor with the content, just pass the value to the Text area as usual.

<textarea id="editor" name="editor">Your content here</textarea>

Upload and Insert Image in CKEditor

CKEditor by default does not give the option to upload the image. Enabling this feature requires writing a piece of code. It needs to add a Laravel route, a script for image upload, and some JavaScript. First, to provide the image upload option you need to call CKEditor in the following way.

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

Here for the key filebrowserUploadUrl I passed the route URL and csrf token. Let’s define the route upload as follows.

Route::post('ckeditor/image_upload', 'EditorController@upload')->name('upload');

Head over to the terminal and create this EditorController.

php artisan make:controller EditorController

Reload the page. Click on CKEditor’s image icon and you will see the image upload option as shown below.

Now to insert the chosen image in CKEditor, you have to upload the image on the server and send back an image URL. For storing an image on a server, I create a symbolic link(symlink) of a storage folder. Run the command below to create a symlink:

php artisan storage:link

The route upload map with the upload method of EditorController. Define upload method in the EditorController as follows:

<?php
 
namespace App\Http\Controllers;
 
use Illuminate\Http\Request;
 
class EditorController 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 and you will get the image added successfully to the CKEditor.

I hope you understand how to install and use CKEditor in Laravel. Please share your thoughts and suggestions in the comment below.

Related Articles

• How to Install and Use TinyMCE Editor in Laravel
• How to Install and Use Trix Editor in Laravel
• PayPal Payment Gateway Integration in Laravel

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