CKEditor is a ready-for-use HTML text editor designed to simplify web content creation. IMCE is an image/file uploader and browser that supports personal directories and quota. FileDepot is a full featured Document Management module that supports role and user based security.

This tutorial explains how to setup CKeditor, IMCE and File Depot in Drupal-7 in very simple steps:

step-1) Install and Configure CKeditor

step-2) as an administrator, install IMCE from https://drupal.org/project/imce.

a) enable/activate IMCE from the modules list

b) configure CKeditor for IMCE: Configuration >> Content Authoring >> CKeditor >> Profiles-Full HTML-Edit >> File Browser settings.

Select IMCE from the 3-File browser type pull-down menu types.

Figure-1: File Browser settings

ck1

Save and try adding a new content to see if things work.

Example screenshot is below. Note: the Full-HTML profile is selected. Click the Browse Server button to open the folder / file explorer.

Figure-2: CKeditor - IMCE Image Properties

ck2

Figure-3: CKeditor-IMCE File / folder explorer

ck4

The above would help only to select already uploaded files. What if you want to create extra folders to organize all your media(files, images, audio / video, etc).

Step-3) Enter FileDepot. Install FileDepot from https://drupal.org/project/filedepot and its dependecies: Chaos Tools and Libraries.

FileDepot needs a little configuration:

a) create a "libraries" folder if you dont have one, for example: sites/all/libraries

b) create 2-subdirectories inside the libraries folder as follows:

  • sites/all/libraries/html_encoder
  • sites/all/libraries/jquery.blockui

The following javascript files need to be downloaded / retrieved and saved to their respective folders under sites/all/libraries:

c) setup your private file system: Administration >> Configuration >> Media >> File system.

Set the public and private file paths, if unset by default.

Figure-4: Administration >> Configuration >> Media >> File system.

ck5

Save Configuration and test FileDepot.

Example:

a) To add new folder: Goto Content >> Add content >> FileDepot Folder:

Figure5: Goto Content >> Add content >> FileDepot Folder:

ck8

Add "Folder Name" and description;

Parent Folder = pull down and select "Top level folder"

Files = add a new file and click Upload.

Click on Save to exist.

b) To add new content to existing folder: goto Content, and find folder name in content list, click the title then edit, then add the new file using the upload box:

Figure-6: Admin >> Content

ck9

Figure-7: click Edit button to add new media into an existing folder

ck10

Figure 8: Folder view

ck11

Note: By default, FileDepot link places a link in the navigation menu.

While adding new content, for example, an Article, newly created folders and added files can be displayed accessed via CKeditor >> Image Insert >> Browse Server

Figure 9 : IMCE view with filedepot

ck12


Thats all folks.

Enjoy!

Comments and Questions welcome.

Add comment


Security code
Refresh