Mar 13, 2024
0
Level 1
HELP ME
I have a form with Ckeditor 5 and can upload images from it, but my Ckeditor 5 display is still standard. I want to add some of the toolbars that I need... can you help me on how to add some of the toolbars that I want... because I have tried adding toolbars following the documentation but when I add toolbars my Ckeditor display disappears
this Form.blade :
@extends('dashboard.all')
@section('container')
<div class="container-fluid">
<div class="col-sm-12 d-flex justify-content-between align-items-center pt-2 pb-2 mb-3 border-bottom">
<h1 class="h1">CKeditor Image Upload Example laravel, {{ auth()->user()->name }}</h1>
</div>
</div>
<div class="card table-responsive col-lg-10">
<div class="card-header">
<form action="{{route('ckeditor.store')}}" method="post" enctype="multipart/form-data">
@csrf
<div class="mb-3">
<label for="title" class="form-label">Title :</label>
<input type="text" class="form-control" id="title" name="title" placeholder="Title here" value="{{ o old('title') }}">
</div>
<div class="mb-3">
<label for="slug" class="form-label">Slug :</label>
<input type="text" class="form-control" id="slug" name="slug" placeholder="Slug here" value="{{ old('slug') }}">
</div>
<div class="form-group">
<label class="form-label"> Description:</label>
<textarea input="description" type="file" id="description" name="description" class="form-control description" placeholder="Enter CKeditor description here"></textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-dark"> Submit </button>
</form>
<style>
.ck-editor__editable_inline {
height: 300px;
}
</style>
<script>
ClassicEditor
.create( document.querySelector( '#description'),{
toolbar: {},
ckfinder: {
uploadUrl: '{{route('ckeditor.upload', ['_token='.csrf_token()]) }}',
}
})
.catch( error => {
console.error(error);
});
</script>
@endsection
this is my controller:
namespace App\Http\Controllers;
use Illuminate\Http\JsonResponse;
use Illuminate\Http\Request;
use App\Models\Editor;
class editorController extends Controller
{
public function index()
{
return view('ckeditor');
}
public function upload(Request $request)
{
if ($request->hasFile('upload')) {
$originName = $request->file('upload')->getClientOriginalName();
$fileName = pathinfo($originName, PATHINFO_FILENAME);
$extension = $request->file('upload')->getClientOriginalExtension();
$fileName = $fileName . '_' . time() . '.' . $extension;
$request->file('upload')->move(public_path('media'), $fileName);
$url = asset('media/' . $fileName); //arah folder
return response()->json(['fileName' => $fileName, 'uploaded' => 1, 'url' => $url]);
}
}
public function store(Request $request)
{
// dd($request->all());
$request->validate([
'title' => 'required',
'slug' => 'required',
'description' => 'required'
]);
$input = $request->all();
Editor::create($input);
return redirect('ckeditor')->with('success', 'Editor succes uploa data and image');
}
}
Please or to participate in this conversation.