IMCE for Drupal 7 and Integration with TinyMCE

tutuploads2._Install_two_modules_-__imce_wysiswyg_and_IMCE_using_Dr.png

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/.

  1. Download IMCE – Get the latest stable version from this page http://drupal.org/project/imce
  2. 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

tutuploads4.png

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.

tutuploadsmedia_1309229554814.png

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

Step 4: Configure WYSIWIG

tutuploads5_Configure_WYSIWIG.png

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.

tutuploadsmedia_1309230255752.png

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)

tutuploadsmedia_1309230680501.png

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.

tutuploadsmedia_1309230769655.png

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.

tutuploadsmedia_1309230887938.png

When you click the image browse icon you will see your file system in a new window and be able to upload and choose pictures for your site.

tutuploadsmedia_1309231516442.png

Author

0 0 votes
Article Rating
Subscribe
Notify of
guest

6 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
Buntha
Buntha
12 years ago

Hi i did and following the step but i can not see my pictures.

It ok when i i did on body i can pictures and what ever but when i save i see only texts but pictures is not preview.

Can you give me advise

Thanks

Nick
12 years ago
Reply to  Buntha

Hi and welcome, Bunthan!

Our apologies for any delay in responding over the weekend and Monday. In the U.S., Monday was a national holiday (Independence Day) so we took the whole weekend off as well as Monday. We’re just now catching up on received emails.

Sorry for the inconvenience, but if you’re a student at OSTraining, could you copy and paste this into the support forum so one of our support techs can look into it for you? Here’s the direct link to it:

[url=http://www.ostraining.com/index.php?option=com_agora&Itemid=300458]http://www.ostraining.com/i…[/url]

Please see the support FAQ for more information:

[url=http://www.ostraining.com/support-faq/]http://www.ostraining.com/s…[/url]

Kind regards,

Nick

Andrej
Andrej
12 years ago

Thank you!

Kmeng
Kmeng
11 years ago

HI i have follow above information but i didn’t see the IMCE when i click “Buttons and Plugins”.

i stall

1. IMCE : 7.x-1.5

2. IMCE Wysiwyg API bridge : 7.x-1.0

3. Wysiwyg : 7.x-2.1

drupal core : 7.14

Thanks in advance.

Rony
Rony
11 years ago

Warning below comes up:

You do not have access to any configuration profile to use the file browser!

right after I click the browse button.

How to fix it?

Thanks

asia
11 years ago

speechless. Don’t know how far i could have gone without the os team

6
0
Would love your thoughts, please comment.x
()
x