Add CKFinder to CKEditor for image file management. - Drupal Tutorial

03 Feb 2012

Administrator

Drupal Tutorials

1
2
3
4
5

(0 votes)

Client side editors in Drupal often require additional modules to enhance them. If you uploaded CKEditor, without a file management module you won't be able to search the site for pictures when you click the insert button.

CKFinder is an addition for the CKEditor that will give you file management capabilities. With this installed you will be able to search your site for pictures in your various site directories.

CKFinder is a File Manger that will work with CKEditor.

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.

Step 1: Download CKFinder

tutuploadstutuploadsDownload_the_PHP_version_of_CKFinder_from_the_website..png

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.

Step 2: Upload to your server.

tutuploadstutuploadsUpload_to_the_proper_folder_on_your_server..png

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.

Step 3. Edit the configuration file

tutuploadstutuploadsModify_-_sitesallmodulesckeditorckfinderconfig.php.png

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.

Step 4: Add a new line to the same config.php file

tutuploadstutuploadsAdd_this_line_-___require_once__........includesfileman_1.png

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.

Step 5: Edit the Drupal settings.php file

tutuploadstutuploadsOpen_the_Drupal_settings_file__sitesdefaultsettings.php_1.png

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.

tutuploadstutuploadsUncomment_the__cookie_domain_variable_and_set_the_domai_1.png

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.

6. Add the image icon to the CKEditor Toolbar

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.