Search by Queries/Bugs/Errors

How to insert ckeditor data into database in Laravel?

Created at 13-Oct-2021 , By samar

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

If you like what you are reading, please consider buying us a coffee ( or 2 ) as a token of appreciation.

Don't forget to share this article! Help us spread the word by clicking the share button below.

We appreciate your support and are committed to providing you valuable and informative content.

We are thankful for your never ending support.

Bootstrap C C++ Cmd CodeIgniter Css Drupal Git Html Java Javascript Jquery Laravel Nodejs Php Python React Sql Typescript Wordpress

How to insert ckeditor data into database in Laravel?

Save form data using ckeditor in Laravel

Random Code Snippet Queries: Laravel

Latest Code Snippets