How To Integrate CKFinder with CKEditor
In this blog post, I use Ckeditor 4 and CKfinder 3 To upload an image from the Compter to sever. Download Files from given below link Or Oficial site of CKEditor Create a view page where you want to add CKEditor with CKFinder. HTML Code Script Code File Structure assets->plugins->ckeditor assets->plugins->ckfinder If add do the right away you can see we have an image upload option with Browse Server. to activate this now add CKFinder File Path. After that, you can see we have a File Browser Panel. Now you can upload the image to your website and application. Download Plugins from here Step: 1 Place plugin file in CKEditor/plugins folder Step: 2 Add some code as given below into the ckeditor/Config.js file. assets/plugins/ckeditor/Config.js Here In My Case "maximize" is my plugin name. and add to the toolbar groups. So here we completed a blog on How To Integrate CKFinder with CKEditor. I hope it's will help youStep: 1 Download CKEditor and CKFinder
Step: 2 Create a View page
<textarea name="body" id="editor1" rows="5 " cols="5"></textarea> <script type="text/javascript" src="{{asset('/assets/plugins/ckeditor/ckeditor.js')}}"></script>
Make Sure Give the right path of CKEditor Files.
.png)
<script type="text/javascript">
CKEDITOR.replace( 'editor1',{
filebrowserBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
Full code.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<textarea name="body" id="editor1" rows="5 " cols="5"></textarea>
<script type="text/javascript" src="{{asset('/assets/plugins/ckeditor/ckeditor.js')}}"></script>
<script type="text/javascript">
CKEDITOR.replace( 'editor1',{
filebrowserBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html',
filebrowserImageBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Images',
filebrowserFlashBrowseUrl : '../../../assets/plugins/ckfinder/ckfinder.html?type=Flash',
filebrowserUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
filebrowserImageUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
filebrowserFlashUploadUrl : '../../../assets/plugins/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
});
</script>
</body>
</html>If you want to add more plugins in CKEditor flow these steps.
config.extraPlugins = 'maximize';
config.toolbarGroups = [
{ name: 'document', groups: [ 'mode', 'document', 'doctools' ] },
{ name: 'clipboard', groups: [ 'clipboard', 'undo' ] },
{ name: 'editing', groups: [ 'find', 'selection', 'spellchecker' ] },
{ name: 'forms' },
{ name: 'basicstyles', groups: [ 'basicstyles', 'cleanup' ] },
{ name: 'paragraph', groups: [ 'list', 'indent', 'blocks', 'align', 'bidi' ] },
{ name: 'links' },
{ name: 'insert' },
{ name: 'styles' },
{ name: 'colors' },
{ name: 'tools' },
{ name: 'others' },
{ name: 'about' }
{ name : 'maximize'} //here added new plugin
];
About the author
Brijpal Sharma
Hello, My Name is Brijpal Sharma. I am a Web Developer, Professional Blogger and Digital Marketer from India. I am the founder of Codermen. I started this blog to help web developers & bloggers by providing easy and best tutorials, articles and offers for web developers and bloggers...
You must be logged in to post a comment.
You may also be interested in...
How to use free SSL for website from Cloudflare [1 year Free]?How To Make Multi Auth In Laravel 7
Fix XAMPP server error xampp-control.ini Access is denied
How To Solve CORS issue in Laravel and make Laravel CORS Middleware
How To Integrate CKFinder with CKEditor
Show and Edit Dynamic Data In Modal Popup PHP
How To Use Laravel 7 Blade Component [New Feature in Laravel 7]
How To Display A Loader While Sent Request Is In Progress In Vue
Validation Handling In Laravel Vue Error Step By Step
How To Use Tinker To Store Data in Database In Laravel 6
