Add CKFinder to CKEditor for image file management.

We are assuming you already have the CKEditor installed. If you haven’t done that yet, check this tutorial first. https://www.ostraining.com/blog/drupal/install-ckeditor-in-drupal-7/

With CKFinder installed you will be able to browse your entire site to find pictures and media to insert in your posts, while you’re using the CKEditor.

Download: http://ckfinder.com – Download the PHP version.

You’ll see several choices when you visit the site http://ckfinder.com. Mouse over the PHP logo and be sure you download the PHP version. Both the zip version or the tar.gz version are identical. Just make sure you’re decompression program can extract the one you download.

Save the file to your computer and extract it.

Upload to /sites/all/modules/ckeditor/ so the full path will be /sites/all/modules/ckeditor/ckfinder

There are two nested ckeditor folders, one above the level of ckfinder and, one on the same level. The picture shows you how it should look.

• Make a backup copy of the file found at sites/all/modules/ckeditor/ckfinder/config.php
• Modify the file on the site using your cpanel built in file manager or download it and do the work in a text editor
• Find the line in the config.php file that begins with “function CheckAuthentication() “and delete it.
• Delete the entire section including the line function CheckAuthnticaion(), and everything down to, and including, the bracket at the bottom.

• In the same config.php file find the line that says $baseDIr = resolveURL ($baseUrl);
• Directly under it, add this line:  require_once ‘../../../../includes/filemanager.config.php’;

Past or type the code directly below $baseDir = resolveUrl($baseUrl);
It should look like the picture above.
$baseDir = resolveUrl($baseUrl);

Save and close the file.

Open the settings.php file. (Make a backup first). You will find the file in this folder /sites/default

First – Uncomment the line by deleteing the “#” at the front of the line. Change the url to http://yourdomainname.com

Note: By beginning the line with the pound sign “#” , the line is skipped and not read into the program. The # makes the line a “comment”. Programmers use comments to leave instructions and record their changes within the program file while they are working on it. Uncommenting it (removing the #) makes it active again. In a script file you can “comment out” a line to have it skipped, or “uncomment” a line or section to make it active again.

CAUTION: make sure you don’t change an punctuation. Every comma and semicolon is important.

Then scroll down to find the next line to change.

In the same file, scroll down and find the line that begins with “$cookie_domain.”

Note: When I went to do this the $cookie_domain was already uncommented – there was no # before the line. If that’s the case just change the domain name to yours. Different versions and updates may have minor changes, so expect the unexpected.

When you’re done it should look like the example above with no “#”

Save and close the file.

1. Click the Configuration button on the admin menu.
2. Click the CKEditor link under Content Authoring.

That will take you to the Profiles section. You need to add the icon to each profile you have, based on whether you are allowing full html and who you want to give access to.

You’ll see the Profiles section. Click “edit” and you will get the profiles menu. On the menu you will see Editor Appearance. Expand the Editor Appearance section by clicking on it.

Instead of icons or menus, the CKEditor presents you with code to edit. You only have to add one word to the code to add the icon to the editor. Be careful of punctuation marks.

Scroll to the bottom and insert, ‘Image’ in single quotes. Make sure there is a comma between words, but don’t end the line with a comma.

The original line looks like this [‘Link’,’Unlink’,Anchor’] you’re going to change it.

When you’re done the line should look like this:
[‘Link’,’Unlink’,Anchor’,’Image’]

When you view the toolbar in edit mode, the icon will appear.

If you did it correctly, you will see the icon for inserting an image in the toolbar when you go to use the editor. Notice that in the picture above you see the icons for Link, Unlink, Anchor, and Image – exactly what is written in the new line of code in the Toolbar editor. You will see four icons in this segment of the toolbar instead of 3.

You need to first configure CKEditor to allow access to CKFinder.

From the administration menu choose People, then Permissions, then CKFinder access.

Check the appropriate boxes to allow permissions to your users. Access was not turned on by default.

When you are done, and you click the icon you installed, you will see the file manager pictured above.