How to Install & Integrate CKEditor (WYSIWYG) in Laravel 7|8?

Last updated on by Digamber
In this tutorial, we will understand how to install and use CKEditor in Laravel 7, and we will also learn to upload images through CKEditor and store in the Laravel public storage.

Should We Use CKEditor?

In general, writing rich content might be required for you in a specific situation where you have to style the various HTML elements, such as titles, paragraphs, anchor tags, images, etc.

As you know, text-area is a form input field that allows us to write smaller descriptions. However, it has certain limits; you can not write other HTML elements like titles, paragraphs, anchor tags, and images. Take it from me this can not be done without the help of a rich text editor,

This is what CKEditor is set out to do, and It is a JavaScript-based third-party plugin. It can be your true friend in the same journey where you are traveling alone. No wonder, you can style every foundational HTML element that you are required to do so. It is loaded with the many features that make a simple text editor to rich text editor.

Laravel CKEditor Tutorial

Easy to integrate

It can be integrated easily with almost every modern JavaScript tools, frameworks, and technologies, including package managers such as npm, NuGet, Composer, yarn and pnpm or bundlers such as webpack or Rollup.js.

Install Laravel App

We begin with installing a new laravel project, in this project we will try to assimilate CKEditor (WYSIWYG). Run the following artisan command to install laravel project.

composer create-project laravel/laravel laravel-ckeditor --prefer-dist

Run command to get inside the project directory.

cd laravel-ckeditor 

Install CKEditor in Laravel 7

CKEditor offers boundless opportunities to manage the content through a WYSIWYG component. Installing a smart CKEditor (WYSIWYG) component in Laravel is not tricky. It can possibly be done in two ways.

You can go for CDN, and you can also opt to download the CKEditor package from their official site. For your ease, you can visit their official site link by clicking here.

CKEditor Installation in Laravel

CKEditor CDN Link

Well our first method is a simple way of adding CKEditor in Laravel 7, it doesn’t require to conjugate multiple files in your project. Essentially, It requires a simple CDN link to be placed in your laravel template.

<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>

Download CKEditor Package

Sometimes, we prefer to download the package, and It is believed to be the righteous and standard procedure to install the packages in laravel. You don’t have to do much, just create a new folder by the name of ckeditor inside the public folder and place the downloaded file inside of it.

Download CKEditor Package

Use CKEditor in Laravel

Theoretically, we have completed all the foundational steps related to the downloading and installing the CKeditor in laravel.

Now, comes the part where we learn how to assimilate CKeditor in laravel. Obviously, it is a stalwart solution for content modification, especially for web and software applications.

Go to the view file where you want this plugin to be added and paste the following code.

<html lang="{{ str_replace('_', '-', app()->getLocale()) }}">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>Install and Use CKEditor In Laravel</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css">
</head>

<body>
    <div class="container">
        <div class="row">
            <div class="col-md-7 offset-3 mt-4">
                <div class="card-body">
                    <form method="post" action="" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group">
                            <textarea class="ckeditor form-control" name="wysiwyg-editor"></textarea>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</body>

<script src="//cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $('.ckeditor').ckeditor();
    });
</script>

</html>

Let me break down what i did above. We inserted the CKEditor CDN link, declare a pre-built JavaScript method that displays the WYSIWYG editor, and finally used a textarea.

Laravel 7 Insert or Upload Image in CKEditor

We have followed the required steps, respectively, to install and use CKeditor in Laravel. Now, In this step, we will shed light on how to upload image in CKEditor with Laravel.

To activate the image upload option, we have to define the CKeditor JavaScript methods. The filebrowserUploadUrl property takes route URL and csrf token.

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

You can check there is an upload button that appeared under the image properties tab in CKEditor.

Laravel 7 Insert or Upload Image in CKEditor

You have to create the image uploading route.

Route::post('ckeditor/upload', 'CKEditorController@upload')->name('ckeditor.image-upload');

Use following command to create a image uploading controller.

php artisan make:controller CKEditorController

Next, create a images folder inside the public directory, this will be the place where all the uploaded images through CKEditor reside.

Open app/Http/Controllers/CKEditorController.php and paste the following code.

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

class CKEditorController extends Controller
{
    public function upload(Request $request)
    {
        if($request->hasFile('upload')) {
            $originName = $request->file('upload')->getClientOriginalName();
            $fileName = pathinfo($originName, PATHINFO_FILENAME);
            $extension = $request->file('upload')->getClientOriginalExtension();
            $fileName = $fileName.'_'.time().'.'.$extension;
            $request->file('upload')->move(public_path('images'), $fileName);
            $CKEditorFuncNum = $request->input('CKEditorFuncNum');
            $url = asset('images/'.$fileName); 
            $msg = 'Image successfully uploaded'; 
            $response = "<script>window.parent.CKEDITOR.tools.callFunction($CKEditorFuncNum, '$url', '$msg')</script>";
               
            @header('Content-type: text/html; charset=utf-8'); 
            echo $response;
        }
    }
}

All hail to you, now we can upload the image from WYSIWYG or CKEditor, once the image is uploaded, you can view that image in public/images folder.

From the best of my knowledge, i tried to clear the concept of installing and using CKEditor in Laravel, i believe you will like this tutorial and share it with others.