Uploading image with CKEditor and KCFinder in Laravel 5
2024-04-24 00:42:09
Anuj Mistri
Laravel
Integrating CkEditor in Laravel
In this tutorial, I am going to show you how to integrate CKEditor and KCFinder plugin with image upload functionality in Laravel 5.4.
Below is the step by step guide for integrating CKEditor and KCFinder plugin in Laravel 5.
Step 1: Download CKEditor
Download latest version of Ckeditor from http://ckeditor.com/download
Step 2: Download kcfinder for image uploading
Download latest version of kcfinder from http://kcfinder.sunhater.com/download
Step 3: Extract and Move the files
inside ‘public’ directory create a directory 'ckeditor' and move both ckeditor and ckfinder files. After that extract both zip files and rename ‘kcfinder-master’ as ‘kcfinder’.
Step 4 : Configuration
Configuring kcfinder in CKEditor.
Open 'config.js' file which is located in 'public/ckeditor/ckeditor/' directory and add below line of in it.
CKEDITOR.editorConfig = function( config ) {
config.filebrowserBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=files';
config.filebrowserImageBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=images';
config.filebrowserFlashBrowseUrl = 'public/ckeditor/kcfinder/browse.php?opener=ckeditor&type=flash';
config.filebrowserUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=files';
config.filebrowserImageUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=images';
config.filebrowserFlashUploadUrl = 'public/ckeditor/kcfinder/upload.php?opener=ckeditor&type=flash';
};
Configuring Ckeditor settings
Open 'public/ckeditor/ckfinder/conf/config.php' file and change 'disabled' => true’ to 'disabled' => false.
Adding routes
Route::get('ckeditor-demo',function(){
return view('ckeditor.index');
});
Creating your View
create a file named 'index.blade.php' inside 'resources/views/ckeditor' directory and add below code in it.
<!DOCTYPE html>
<html lang="en">
<head>
<title>CKeditor Demo with KCFinder in Laravel 5.4 </title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"> </script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
<script src="{{asset('public/templateEditor/ckeditor/ckeditor.js')}}"> </script>
</head>
<body>
<div class="container">
<div class="panel panel-success">
<div class="panel-heading">Integrating CKeditor in Laravel 5.3 </div>
<div class="panel-body">
<textarea id="ckeditor" class="ckeditor"> </textarea>
<script type="text/javascript">
CKEDITOR.replace( 'ckeditor' );
</script>
</div>
</div>
</div>
</body>
</html>
Ps: By default, all the uploaded images are stored in 'public/ckeditor/ckfinder/upload/images/' directory of your app. You can change the path whatever you want.
This post is submitted by one of our members. You may submit a new post here.
- What is reverse routing in Laravel?
- Installing soap module on PHP 7 ubuntu
- Generating application key in Lumen
- How to get user details by id or email in Laravel?
- Sending data to view using redirect in Laravel?
- Installing Laravelcollective/html package in laravel 5.5
- How to Clear cache in Laravel?
- What does "composer dump-autoload" do?
- Rollback all migrations in Laravel
- Active Record Implementation in Laravel?
- Call to a member function connection() on null Laravel Lumen
- How to check current installed version of Laravel ?
- How to assign multiple middleware to Laravel route ?
- How to resolve phpunit/phpunit 5.7.8 requires ext-dom * error while installing Laravel 5
- Reading writing and deleting a File from disk or filesystem in Laravel 5
- How to resolve MassAssignment Exception _token error in Laravel 5?
- How to enable query log in Laravel?
- How to get records between two date in Laravel using eloquent
- What are named routes in Laravel?
- How to run Laravel Development server?
- How to protect your .env file from public access in Laravel?
- Laravel Http to https
- Paginating records in Laravel
- Cross-Origin Request Blocked error in Laravel 5
- Call to undefined function csrf_field()
- Create image from base64 string laravel
- Difference between –prefer-dist and –prefer-source options in composer
- How to secure .env file in Laravel
- Non-static method should not be called statically Laravel
- Function to get excerpt from Laravel string
- Laravel: Sanitize Request Input by using Sanitizing Middleware
- Method spoofing in Laravel
- Changing storage path permission in Laravel
- What is the purpose of the Eloquent cursor() method in Laravel
- How to use custom table in Laravel Model?
- Using Session in Laravel
- Class ‘DB’ not found in Lumen
- Ajax code to delete file in laravel
- DB prefix in Lumen Framework.
- Installing specific version of Laravel with Composer
- Step by step guide to display wordpress posts in Laravel 5
- findorFail method in Laravel
- Laravel get ip address
- Image Manipulation in Laravel 5
- Using multiple Where clause Query in Laravel.
- Laravel migration change column type
- What new in Laravel 6
- PHP Artisan
- PHP artisan migrate command
- Run raw query in Laravel.
- php artisan serve not working
- php artisan serve stop
- Laravel phone number validation
- Laravel get server ip
- Where not in Laravel
- How to create zip files in Laravel?
- Creating zip of multiple files and download in Laravel.
- Laravel get data from database by id.
- List some official packages provided by Laravel.
- Service providers in Laravel
- How to enable maintenance mode in Laravel 5?
- Getting Random rows in Laravel Eloquent.
- IN query in Laravel Eloquent
- Disabling timestamps in Laravel Eloquent
- Explain migrations in Laravel? How can you generate migration.
- Read and Write Cookie in Laravel 5
- Adding Multiple Order By clause in Laravel
- Disabling error handler in laravel
- What happens when AUTO_INCREMENT reaches the maximum value?
- What is an Initialization function in PHP?
- clear-compiled Command in Laravel
- PHP artisan optimize command
- Laravel delete migration
- sqlstate hy000 error 2002 laravel
- How to get all records in Laravel?
- Laravel get logged in user data
- Get user id laravel blade
- Check user type in laravel
- Laravel run artisan command from controller
- php artisan serve
- Laravel Admin Panel - Fjord
- Laravel Socialite : Authentification OAuth avec Google, Facebook et Github (Social login)
- Laravel : Importer, exporter les données en Excel ou CSV avec spatie/simple-excel
- Laravel : Générer un QR code avec simple-qrcode
- Magni omnis omnis qu
- Installer Vue.js dans un projet Laravel
- Laravel - Vue.js : Uploader un fichier avec une barre de progression
- Installer Bootstrap 5 via npm et laravel Mix dans un projet un Laravel
- Screencast : Installer Bootstrap 5 via npm et laravel Mix dans un projet Laravel
- Laravel : importer et exporter une collection en Excel avec Fast Excel
- asd
- Laravel Livewire : liste déroulante pour choix de pays et ville
- TEstd
- Route controller
- Anim et nostrud plac
Laravel interview Questions © 2019 - Designed by PSD to HTML