How To Integrate CKFinder with CKEditor

Brijpal Sharma
html Publish on:-May 18th, 2020 , Category:- Web Development

In this blog, I share How To Integrate CKFinder with CKEditor. Mainly we use CKfinder to upload images from the computer and for the server.

Step: 1 Download CKEditor and CKFinder

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

Step: 2 Create a View page

Create a view page where you want to add CKEditor with CKFinder.

HTML Code

<textarea name=body id="editor1" rows="5 " cols="5"></textarea>

Script Code

<script type=text/javascript src={{asset('/assets/plugins/ckeditor/ckeditor.js')}}></script>

Make Sure Give the right path of CKEditor Files.

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.

<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>

After that, you can see we have a File Browser Panel.

Now you can upload the image to your website and application.

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.

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

config.extraPlugins = 'maximize';

Here In My Case "maximize" is my plugin name. and add to the toolbar groups.

	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 
	];

So here we completed a blog on How To Integrate CKFinder with CKEditor. I hope it's will help you

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...

0 Comments

You must be logged in to post a comment.