Laravel 10 CKeditor Image Upload Example

April 13, 2023

3 Min Read

Steps for Laravel 10 CKeditor Image Upload Example

Step 1: Install Laravel 10
Step 2: Install CKEditor
Step 3: Create a Route and a View
Step 4: Install CKFinder
Step 5: Configure CKFinder
Step 6: Test the Image Upload
Conclusion

Step 1: Install Laravel 10

The first step is to install Laravel 10 using Composer. You can install Composer by visiting the official website and following the installation instructions. Once you have installed Composer, open your terminal and run the following command to create a new Laravel project:

composer create-project laravel/laravel laravel-ckeditor-image-upload

This will create a new Laravel project named laravel-ckeditor-image-upload.

Step 2: Install CKEditor

Next, we need to install CKEditor in our Laravel project. We can do this using the CKEditor CDN. Open the app.blade.php file located in resources/views/layouts and add the following code in the head section:

<head>
    <!-- ... -->
    <script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
</head>

This will load the CKEditor script in our application.

Step 3: Create a Route and a View

Next, we need to create a route that will load the CKEditor. Open the web.php file located in routes and add the following code:

Route::get('/ckeditor', function () {
    return view('ckeditor');
});

This will create a route named /ckeditor that will load a view named ckeditor.blade.php.

Next, create a new file named ckeditor.blade.php in the resources/views directory and add the following code:

<!DOCTYPE html>
<html>
<head>
    <title>CKEditor Image Upload Example</title>
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
</head>
<body>
    <h1>CKEditor Image Upload Example - LaravelTuts.com</h1>

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

    <script>
        ClassicEditor
            .create( document.querySelector( 'textarea[name="editor"]' ), {
                ckfinder: {
                    uploadUrl: '/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images&responseType=json',
                },
            } )
            .catch( error => {
                console.error( error );
            } );
    </script>
</body>
</html>

This will create a form with a CKEditor instance that will allow us to upload images.

Step 4: Install CKFinder

Next, we need to install CKFinder, which is a file manager that allows us to upload and manage files in CKEditor. We can install CKFinder by downloading it from the official website and extracting it to the public directory of our Laravel project.

Step 5: Configure CKFinder

After installing CKFinder, we need to configure it to work with our Laravel project. Open the config.php file located in public/ckfinder/config and add the following code:

<?php

return array(
    'authentication' => function () {
        return true;
    },
    'backends' => array(
        'default' => array(
            'baseUrl' => '/public/ckfinder/userfiles/',
            'root' => '/public/ckfinder/userfiles/',
            'chmodFiles' => 0777,
            'chmodFolders' => 0755,
            'filesystemEncoding' => 'UTF-8',
        ),
    ),
);

This will configure CKFinder to use the public/ckfinder/userfiles directory as the root directory for uploaded files.

Step 6: Test the Image Upload

Finally, we can test the image upload functionality by visiting the /ckeditor route in our browser. We should see a CKEditor instance with an image upload button. Clicking on the button should allow us to select an image file and upload it to the server. Once the image is uploaded, we should see it in the CKEditor instance.

Conclusion

In this blog post, we explored how to use CKEditor in Laravel 10 and upload images to it. We first installed Laravel 10 using Composer and then installed CKEditor and CKFinder. We then created a route and a view that loaded CKEditor and allowed us to upload images.

Finally, we tested the image upload functionality and confirmed that it was working correctly. With these steps, we can easily integrate CKEditor into our Laravel 10 applications and provide a powerful WYSIWYG editor for our users.

admin

I am Nitin Pujari, a full-stack developer and . I created this site to bestow my coding experience with newbie programmers. I love to write on JavaScript, Php, Codeigniter, React, Angular, Vue, and Laravel.

View All Articles