Multiple summernote style causing 403 error when using Laravel 5.2

When using Laravel 5.2 and Summernote WYSIWYG editor, you might encounter a 403 error when trying to use multiple instances of the editor on the same page. This issue occurs due to CSRF protection in Laravel, which prevents unauthorized requests from accessing the application.

To resolve this issue, follow the steps below:

Create a token for each Summernote instance:

First, you need to create a unique token for each Summernote instance. You can generate a token using the Laravel CSRF token generator.

<?php

namespace App\Providers;

use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        $this->app->bind('summernote.token', function () {
            return csrf_token();
        });
    }
}

Pass the token to the Summernote JavaScript:

Next, you need to pass the token to the Summernote JavaScript file. You can do this by defining a new route that returns the CSRF token as JSON and then passing it to the Summernote JavaScript file.

<?php

namespace App\Providers;

use Illuminate\Support\Facades\Route;
use Illuminate\Support\ServiceProvider;

class AppServiceProvider extends ServiceProvider
{
    /**
     * Bootstrap any application services.
     *
     * @return void
     */
    public function boot()
    {
        $this->app->bind('summernote.token', function () {
            return csrf_token();
        });

        Route::get('summernote-token', function () {
            return response()->json(csrf_token());
        })->name('summernote.token');
    }
}

Pass the token to the Summernote HTML:

Finally, you need to pass the token to the Summernote HTML file. You can do this by adding a hidden input field with the name _token and the value of the token.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Summernote Example</title>
    <link href="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.css" rel="stylesheet">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
</head>
<body>
    <textarea id="summernote1" name="summernote1"></textarea>
    <textarea id="summernote2" name="summernote2"></textarea>
    <input type="hidden" id="csrf-token" name="_token" value="{{ csrf_token() }}">
    <script src="https://cdn.jsdelivr.net/npm/summernote@0.8.18/dist/summernote.min.js"></script>
    <script>
        $(document).ready(function() {
            $('#summernote1').summernote({
                token: $('#csrf-token').val(),
                url: '{{ route('summernote.save') }}',
                callbacks: {
                    onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0], 60, editor, welEditable);
                    }
                }
            });

            $('#summernote2').summernote({
                token: $('#csrf-token').val(),
                url: '{{ route('summernote.save') }}',
                callbacks: {
                    onImageUpload: function(files, editor, welEditable) {
                        sendFile(files[0], 60, editor, welEditable);
                    }
                }
            });
        });

        function sendFile(file, imageSizeLimit, editor, welEditable) {
            let formData = new FormData();
            formData.append('image', file);
            formData.append('_token', $('#csrf-token').val());

            $.ajax({
                data: formData,
                type: 'POST',
                url: editor.options.url,
                cache: false,
                contentType: false,
                processData: false,
                success: function(url) {
                    editor.insertImage(url);
                },
                error: function() {
                    alert("Error");
                },
                xhr: function() {
                    xhr.setRequestHeader('X-CSRF-Token', $('#csrf-token').val());
                },
                beforeSend: function() {
                    welEditable.save();
                }
            });
        }
    </script>
</body>
</html>

With these steps, you should be able to use multiple instances of Summernote on the same page without encountering a 403 error.