semicolon24's avatar

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');
}

}

0 likes
0 replies

Please or to participate in this conversation.