shahr's avatar
Level 10

Laravel CKEditor

I am a newbie. I've been coding my website for 2 weeks and now it's about to finish, but I don't know how to install CKEditor in my project. Please help me to install CKEditor in Laravel. I already downloaded CKEditor. And I copied it into the public folder and I don't know how to write the code to upload the image in CKEditor...

0 likes
3 replies
LaryAI's avatar
Level 58

To install CKEditor in Laravel, you can use the "laravel-ckeditor" package. Here are the steps to install and use it:

  1. Install the package using composer:
composer require unisharp/laravel-ckeditor
  1. Publish the CKEditor assets:
php artisan vendor:publish --tag=ckeditor
  1. Include the CKEditor script and stylesheet in your layout file:
<head>
    ...
    <script src="{{ asset('vendor/unisharp/laravel-ckeditor/ckeditor.js') }}"></script>
    <link rel="stylesheet" href="{{ asset('vendor/unisharp/laravel-ckeditor/skins/moono-lisa/editor.css') }}">
</head>
  1. Use the CKEditor in your form:
<form>
    ...
    <textarea name="content" id="editor"></textarea>
</form>
<script>
    CKEDITOR.replace('editor');
</script>

To upload images in CKEditor, you can use the "laravel-ckeditor-upload" package. Here are the steps to install and use it:

  1. Install the package using composer:
composer require unisharp/laravel-ckeditor-upload
  1. Publish the CKEditor upload assets:
php artisan vendor:publish --tag=ckeditor-asset
  1. Include the CKEditor upload script in your layout file:
<head>
    ...
    <script src="{{ asset('vendor/unisharp/laravel-ckeditor-upload/ckeditor.js') }}"></script>
</head>
  1. Use the CKEditor with image upload in your form:
<form>
    ...
    <textarea name="content" id="editor"></textarea>
</form>
<script>
    CKEDITOR.replace('editor', {
        filebrowserUploadUrl: "{{ route('ckeditor.upload', ['_token' => csrf_token() ]) }}",
        filebrowserUploadMethod: 'form'
    });
</script>

Note: Make sure to add the "csrf_token" to the upload URL to prevent CSRF attacks. Also, make sure to configure the CKEditor upload settings in the "config/ckeditor.php" file.

Please or to participate in this conversation.