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
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
Figure-3: CKeditor-IMCE File / folder explorer
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:
http://www.strictly-software.com/scripts/downloads/encoder.js - SAVE FILE as: sites/all/libraries/html_encoder/html_encoder.js
http://malsup.github.com/jquery.blockUI.js - SAVE FILE as sites/all/libraries/jquery.blockui/jquery.blockui.js
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.
Save Configuration and test FileDepot.
Example:
a) To add new folder: Goto Content >> Add content >> FileDepot Folder:
Figure5: Goto Content >> Add content >> FileDepot Folder:
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
Figure-7: click Edit button to add new media into an existing folder
Figure 8: Folder view
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
Thats all folks.
Enjoy!
Comments and Questions welcome.
