IMCE for Drupal 7 and Integration with TinyMCE
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
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.
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.
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
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
Thank you!
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.
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
speechless. Don’t know how far i could have gone without the os team