How to insert ckeditor data into database in Laravel?

Updated at 13-Oct-2021, By samar

How to insert ckeditor data into database in Laravel?

Through the use of the programming language, we will work together to solve the "How to insert ckeditor data into database in Laravel?" puzzle in this lesson.

You can insert ckeditor data into database in Laravel. You have to add ckeditor CDN script in HTML page and add form input element (textarea) and call the input element to replace as the ckeditor
  • Save form data using ckeditor in Laravel

    //routes\web.php
    use App\Http\Controllers\PostController;
    
    Route::get('/post/create', [PostController::class, 'create'])->name('post.create');
    Route::post('/post/store', [PostController::class, 'store'])->name('post.store');
    
    //app\Models\Post.php
    //Create post model with command <strong>php artisan make:model Post in terminal
    namespace App\Models;
    
    use Illuminate\Database\Eloquent\Factories\HasFactory;
    use Illuminate\Database\Eloquent\Model;
    class Post extends Model
    {
        protected $table = "posts";
    
        protected $fillable = [
            'title', 'body'
        ];
    }
    
    //app\Http\Controllers\PostController.php
    //Create controller using php artisan make:controller PostController in command prompt.
    //Import session facade and post model in post controller after namespace before class definition in PostController.
    use Illuminate\Support\Facades\Session;
    use App\Models\Post;
    
    //Controller’s method
    public function create(){
        return view('post.create');
    }
    
    public function store(Request $request){
    
        $request->validate([
            'title' => 'required|unique:posts|max:200',
            'body' => 'required'
        ]);
    
        $post = Post::create([
            'title' => $request->title,
            'body' => $request->body
        ]);
    
        if(!$post){
            Session::flash('message', 'Error while creating post !');
            Session::flash('alert-class', 'alert-danger');
            return redirect()->back();
        }
        Session::flash('message', 'Post has been created successfully !');
        Session::flash('alert-class', 'alert-success');
        return redirect()->back();
    }
    
    //resources\views\post\create.blade.php
    <!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>Create Post</title>
        <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" crossorigin="anonymous">
        <script src="https://cdn.ckeditor.com/ckeditor5/30.0.0/classic/ckeditor.js"></script>
    </head>
    <body>
        <div class="container mt-3">
            <div class="row">
                <div class="col-md-12">
                    <h3 class="text-center mb-4"> Create Post </h3>
                    @if(Session::has('message'))
                    <div class="alert {{ Session::get('alert-class', 'alert-info') }} alert-dismissible fade show">
                        {{ Session::get('message') }}
                        <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                            <span aria-hidden="true">×</span>
                        </button>
                    </div>
                    @endif
                    <form action="{{ route('post.store') }}" method="POST" enctype="multipart/form-data">
                        @csrf
                        <div class="form-group row mb-4">
                            <label  class="col-sm-2 col-form-label">Title : </label>
                            <div class="col-md-8">
                                <input type="text" name="title" class="form-control" placeholder="Enter title" value="{{ old('title') }}">
                                @error('title')
                                    <div class="alert alert-danger mt-2 p-2">{{ $message }}</div>
                                @enderror
                            </div>
                        </div>
                        <div class="form-group row mb-4">
                            <label  class="col-sm-2 col-form-label">Body : </label>
                            <div class="col-md-8">
                                <textarea  name="body"> 
                            </div>
    					</div>
    				</form>
    			</div>
    		</div>
    	</div>
    	<script>
        
        ClassicEditor.create(document.querySelector('#editor'))        
        .catch( error => { console.error( error ); });
    
       	</script>
    </body>
    

    Output:

Back to code snippet queries related laravel