Laravel 10 Summernote Editor with Image Upload Tutorial

Laravel Summernote Editor is a package that integrates the Summernote WYSIWYG (What You See Is What You Get) editor into Laravel applications. Summernote is a popular JavaScript library that provides a simple and customizable WYSIWYG editor for web applications. 

Step 1: Install Laravel App

composer create-project laravel/laravel SummernoteEditor

Step 2: Create Post Table and Model

php artisan make:migration create_posts_table

database/migrations/2023_07_11_123234_create_posts_table.php

<?php
  
    use Illuminate\Database\Migrations\Migration;
    use Illuminate\Database\Schema\Blueprint;
    use Illuminate\Support\Facades\Schema;
      
    return new class extends Migration
    {
        /**
         * Run the migrations.
         *
         * @return void
         */
        public function up(): void
        {
            Schema::create('posts', function (Blueprint $table) {
                $table->id();
                $table->string('title');
                $table->text('body');
                $table->timestamps();
            });
        }
        /**
         * Reverse the migrations.
         *
         * @return void
         */
        public function down(): void
        {
            Schema::dropIfExists('posts');
        }
    };

Run Migration

php artisan migrate

Now, add model

app/Models/Post.php

<?php
    
    namespace App\Models;
        
    use Illuminate\Database\Eloquent\Factories\HasFactory;
    use Illuminate\Database\Eloquent\Model;
    use Illuminate\Database\Eloquent\Casts\Attribute;
       
    class Post extends Model
    {
        use HasFactory;
        /**
         * Write code on Method
         *
         * @return response()
         */
        protected $fillable = [
            'title', 'body'
        ];
      
        /**
         * Get the user's first name.
         */
        protected function body(): Attribute
        {
            return Attribute::make(
                set: fn (string $value) => $this->makeBodyContent($value),
            );
        }
      
        /**
         * Write code on Method
         *
         * @return response()
         */
        public function makeBodyContent($content)
        {
            $dom = new \DomDocument();
            $dom->loadHtml($content, LIBXML_HTML_NOIMPLIED | LIBXML_HTML_NODEFDTD);
            $imageFile = $dom->getElementsByTagName('img');
           
            foreach($imageFile as $item => $image){
                $data = $image->getAttribute('src');
                list($type, $data) = explode(';', $data);
                list(, $data)      = explode(',', $data);
                $imgeData = base64_decode($data);
                $image_name= "/uploads/" . time().$item.'.png';
                $path = public_path() . $image_name;
                file_put_contents($path, $imgeData);
                     
                $image->removeAttribute('src');
                $image->setAttribute('src', $image_name);
            }
           
            return $dom->saveHTML();
        }
    }

Step 3: Create Route

<?php
  
    use Illuminate\Support\Facades\Route;
      
    use App\Http\Controllers\PostController;
      
    /*
    |--------------------------------------------------------------------------
    | Web Routes
    |--------------------------------------------------------------------------
    |
    | Here is where you can register web routes for your application. These
    | routes are loaded by the RouteServiceProvider within a group which
    | contains the "web" middleware group. Now create something great!
    |
    */
    Route::get('posts/create',[PostController::class,'create']);
    Route::post('posts/store',[PostController::class,'store'])->name('posts.store');

Step 4: Create Controller

app/Http/Controllers/PostController.php 

<?php
     
    namespace App\Http\Controllers;
         
    use Illuminate\Http\Request;
    use App\Models\Post;
    use Illuminate\View\View;
    use Illuminate\Http\RedirectResponse;
         
    class PostController extends Controller
    {
      
        /**
         * Write code on Method
         *
         * @return response()
         */
        public function create(): View
        {
            return view('postsCreate');
        }
            
        /**
         * Write code on Method
         *
         * @return response()
         */
        public function store(Request $request): RedirectResponse
        {
            $this->validate($request, [
                 'title' => 'required',
                 'body' => 'required'
            ]);
       
            $post = Post::create([
                'title' => $request->title,
                'body' => $request->body
            ]);
       
            return back()
                    ->with('success','Post created successfully.');
        }
    }

Step 5: Create Blade Files

resources/views/postsCreate.blade.php 

<!DOCTYPE html>
    <html lang="{{ str_replace('_', '-', app()->getLocale()) }}">
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
          
    <title>Laravel 10 Summernote Editor Image Upload Example</title>
          
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.css" />
    </head>
          
    <body>
        <div class="container mt-5">
            <h1>Laravel 10 Summernote Editor Image Upload Example - webthestuff.com</h1>
            <form method="post" action="{{ route('posts.store') }}" enctype="multipart/form-data">
                @csrf
                <div class="form-group">
                    <label>Title</label>
                    <input type="text" name="title" class="form-control" />
                </div>
                <div class="form-group">
                    <label>Description</label>
                    <textarea id="summernote" name="body"></textarea>
                </div>
                <div class="form-group text-center">
                    <button type="submit" class="btn btn-success btn-block">Publish</button>
                </div>
            </form>
        </div>
          
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
        <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0/dist/js/bootstrap.min.js"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/summernote/0.8.20/summernote-bs5.min.js"></script>
        
        <script type="text/javascript">
            $(document).ready(function () {
                $('#summernote').summernote({
                    height: 300,
                });
            });
        </script>
            
    </body>
    </html>

Run Laravel Project:

php artisan serve

Now, Go to web browser, type the given URL and see the output:

http://localhost:8000/posts/create