Share this:

Hi, today we are going to learn Laravel 10 CKeditor Image Upload Example. Laravel is one of the most popular PHP frameworks that is widely used for building web applications. It offers a robust set of features and tools that make it easy to create complex web applications quickly.

One of the most popular features of Laravel is its built-in support for CKEditor, a powerful WYSIWYG editor that allows users to create and edit content in a visual way. In this blog post, we will explore how to use CKEditor in Laravel 10 and upload images to it.

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.

Share this:

Categorized in: