IMCE for Drupal 7 and Integration with TinyMCE - Drupal Tutorial

03 Feb 2012

Administrator

Drupal Tutorials

1
2
3
4
5

(0 votes)

IMCE is a great module that will give you file management capabilities while editing your articles in Drupal 7.

You can add various WYSIWYG editors to Drupal to allow you to have advanced editing capabilities. Among these are TInyMCE, CKEditor, BUEditor and more. However, while you get a great toolbar, these plugins don't natively allow you to search your file system to find a picture to insert in your page. You need another module for that and it's called IMCE.

We are going to show you how to install it and get it working with TinyMCE. The process is similar with each WYSIWYG editor you install, but the way it looks and acts will be different in each editor. If you'd like to see a demo of how it works, you can visit this page http://ufku.com/drupal/imce/demo.

Step 1: Download the two modules

First and most importantly, you need an editor such as TinyMCE installed. If you haven't already installed TinyMCE, you can find a tutorial here - http://www.ostraining.com/blog/drupal/installing-tinymce-in-drupal-7/.

Download IMCE - Get the latest stable version from this page http://drupal.org/project/imce
Download IMCE Wysiwyg Bridge from http://drupal.org/project/imce_wysiwyg

Step 2: Install the two new modules

tutuploads2._Install_two_modules_-__imce_wysiswyg_and_IMCE_using_Dr.png

After clicking "Install new module" you will be able to browse your computer and upload the modules you just downloaded.

If you've already installed TinyMCE you had to install WYSIWYG first. If you haven't installed it yet, do it now.

Step 3: Enable all the modules

Click "Modules" and scroll down the page to the Media and User Interface sections.

Check to see that the modules are enabled. Put checkmarks in the boxes.

All three boxes should be checked. The "Save Configuration" button is at the very bottom of the page.

Step 4: Configure WYSIWIG

On the "Modules" page scroll down to the User interface section and configure Wysiwyig by clicking on the "Configure" link on the right.

You'll go to the configuration section and see the Input Format section.

Click "Edit" on either the Filtered HTML or full HTML input formats depending on which you wish to edit. If you want it active on both, edit one, the repeat the procedure on the other.

A Wysiwyg profile is associated with an input format. A Wysiwyg profile defines which editor is loaded with a particular input format, what buttons or themes are enabled for the editor, how the editor is displayed, and a few other editor-specific functions.

Choose "Buttons and Plugins". You will see a list of all the possible features you can enable. (or disable)

Expand the Buttons and Plugins section. and scroll to the bottom of the center column and you will see the IMCE checkbox. Makes sure it is checked.

Check the IMCE checkbox on each input format you want to use it on. If you are succesful, when you choose the image browse icon on the TinyMCE toolbar, you get a dialogue box with the file manager icon on it. If you don't see the icon, it isn't installed.