Upload Image and Text using CKEditor5 in Laravel & show CKEditor5 Data in Laravel

Показать описание

#ckeditorinlaravel
#ckeditor
#ckeditor5
#textboxwithimageandtextinlaravel

Support This Channel :

Join this channel to get access to perks:

Your support will be really appreciated.

Thanks For Watching.
I hope This video was helpful. If you have any questions then let me know in the comment section.

Best of luck

#webtechknowledge

You can connect with me with the given links below:

Рекомендации по теме

Комментарии

Welcome.blade.php

<!DOCTYPE html>
<html>
<head>
<title>Laravel CkEditor5 Image Upload Web tech Knowledge</title>
<style type="text/css">
.ck-editor__editable_inline {
height: 500px;
}
</style>
</head>

<body>
<form action="{{url('create')}}" method="POST">

@csrf
<label>Title</label>
<input type="text" name="title">

<textarea id="editor"

<input type="submit">
</form>

<script>
ClassicEditor
.create(document.querySelector('#editor'), {
ckfinder: {
uploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token()]) }}",
}
})
.catch(error => {
console.error(error);
});
</script>
</body>
</html>

page

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use response;

use App\Models\Student;

class HomeController extends Controller
{

public function index(Request $request)
{
$student=new Student;

$student->save();

return redirect()->back();
}

public function show()
{
$student=Student::all();

return view("show", compact('student'));
}

public function upload(Request $request)
{
if ($request->hasFile('upload')) {
$originName =
$fileName = pathinfo($originName, PATHINFO_FILENAME);
$extension =
$fileName = $fileName . '_' . time() . '.' . $extension;

$request->file('upload')->move(public_path('media'), $fileName);

$url = asset('media/' . $fileName);
return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
}
}
}

show page

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;

use response;

use App\Models\Student;

class HomeController extends Controller
{

public function index(Request $request)
{
$student=new Student;

$student->save();

return redirect()->back();
}

public function show()
{
$student=Student::all();

return view("show", compact('student'));
}

public function upload(Request $request)
{
if ($request->hasFile('upload')) {
$originName =
$fileName = pathinfo($originName, PATHINFO_FILENAME);
$extension =
$fileName = $fileName . '_' . time() . '.' . $extension;

$request->file('upload')->move(public_path('media'), $fileName);

$url = asset('media/' . $fileName);
return response()->json(['fileName' => $fileName, 'uploaded'=> 1, 'url' => $url]);
}
}
}

web.php

<?php

use

use
/*

| Web Routes

|
| Here is where you can register web routes for your application. These
| routes are loaded by the RouteServiceProvider and all of them will
| be assigned to the "web" middleware group. Make something great!
|
*/

Route::get('/', function () {
return view('welcome');
});

route::post('/create', [HomeController::class, 'index']);

Route::post('ckeditor/upload', [HomeController::class,

route::get('/show', [HomeController::class, 'show']);

WebTechKnowledge

I just want to say this, I have been trying for 4 hours and I solved it very easily with your video. Why doesn't YouTube feature you? I'm going to cry. Thank you very much, I was able to do it thanks to you

EmirGül-bf

Thanks sir, this tutorial can help me for make my project

Nisaa_

Thanks a lot for the tutorial. It works for me. However, I think in one way or the other, WordPress offers more flexibilities in terms of editing.

dominicdeheuer

Would have been great if you showed how to install it with NPM as is more a real world example

scuraluis

very very very very very very very useful man. thanks in advance.

manncreation

Thanks for this awesome and helpful tutorial, could make a CRUD video just for the CKEditor5, thanks in advance.

mdazhardware

Great video . But what about the media? How to upload e.g. a movie?

sebastiannieroda

is the routes for upload safety? like how about the authorization?

fatkur

Hello, when i display the description, the images ar too big. it's look like they keep their original size. can you help me please?

salifoumahamane

Thanks for this tutorial, it helps a lot. But I had multiple editor used at different sections in admin panel, how to manage it as I have to write same script code wherever I used ckeditor 5 with same I'd or from above it makes for all editor

deepakagarwal

i have a problem, i can not positioning the image? if you help me, it can be a big help for me please

arifulsikder

how to delete those image files in your "public/media" when you delete a 'student'

TRUONGCONGLY-ygej

but how can i delete that image from that folder when i am using ckfinder???

AtanuMarick

If you get an error, be sure to check the permissions of the folder in which the images are uploaded and change them to the necessary ones.

ecsweb-studio

help please, image positioning won't work

retro

not working i also input type file with submit button not working

CodingEscort

how to Upload youtube video in CKEditor 5 and save into database using laravel ?

NIKHILSCI-tg

can it work online on live server? or only work in local server. Because i watched another video with script like this, it cannot work on live server

funskillup

how to make responsive upload in ckeditor

NIKHILSCI-tg

Upload Image and Text using CKEditor5 in Laravel & show CKEditor5 Data in Laravel

Upload Image And Text To Database From App | Android Tutorial 5

Upload Image and Text using CKEditor5 in Laravel & show CKEditor5 Data in Laravel

Upload Images and add Text to Them

Uploading Images with Multer | NodeJS and ExpressJS

How to Upload Image in Text in Midjourney 2024?

How to Convert Image to Editable text

Cypress Plugins | Upload text/image files in real time application | Coders Camp

How to Upload Image and Text in Firebase | Firebase me Data Upload Kaise Kare #firebase #android

Extracting Text from Handwriting Images OCR: The Ultimate Guide! || In Telugu || By Kalamata Info

How to Upload Images to ChatGPT-4 (Image to Text)

This React Text Editor is Amazing! (Image Upload, Markdown, Code Mirror, WYSIWYG, Next.js, Froala)

How to Upload Image And Text in Firebase | Firebase Image And Text Upload #android #firebase

Upload Images & REVERSE/Flip Text & Images!

Summernote Text Editor CRUD & Image Upload in Laravel

How to fill text with photos l How to upload images to Cricut Design Space

How to grab text from a photo and upload just the text directly to your computer.

image and text upload & display Amharic tutorial

how to upload image and text fields together in react.js and express

Android Firebase Storage - 2 - How Upload (Image & Text) File On Firebase Storage By PutByte Met...

Android S7E3 : PHP MySQL - Multipart Upload and Download Images and Text - GridView

Rich Text Editor - Image Upload/Edit

How To Upload Text & Image And Show To Next Page In Flutterflow New 2023 Simple

Laravel 10 Summernote Text Editor with Image Upload CRUD (create read update and delete)

How To Edit Text in an Image in Canva | Quick & Easy Tutorial