Integration of the IMCE module in Wysiwyg API for Drupal : imce_wysiwyg

User login

HexaLab Feeds

Rich-text editing, with a RTE, in Drupal (6.x branch) can be achieved through specific integration modules (TinyMCE, FCKEditor, WYMeditor, etc.). The RTE choice depends a lot on the habits of users and developers, but all the modules allowing this integration are using the same methods to integrate in the content management system (replacement of the text areas in the content editing forms) and thus a lot of code is repeated among these different modules. This is why the Wysiwyg API module has been created. It offers a way more generic approach of RTE integration and even allows multiple editors to be used simultaneously with a per input format profile management.

Inserting images and links to downloadable files are tasks that must be simple, but they always imply uploading files on the Web server and also the management of these files. This is possible in Drupal with the IMCE module, it is a file manager which provides a precise administration of the users and their access rights to the transferred files thanks to a profiles system. Generally, RTE provide integration for a file manager though a callback function (in Javascript) which will allow the file manager to return the URL of the selected file to the editor.

After a long conversation with the different developers of those modules, no one wanted to integrate code coming from other modules in their own module. Thus this discussion ended by the creation of a new module: IMCE Wysiwyg API bridge (imce_wysiwyg). This new module is relatively simple, it has no particular setting and it allows the integration of the IMCE file manager in two RTE currently (through the use of Wysiwyg API of course) : TinyMCE and FCKEditor. Its first version (6.x-1.0) has been published March 4th 2009.

Setup

IMCE Wysiwyg API bridge depends logically on Wysiwyg API and IMCE module, so you will have to install those two modules first and at least one of the editors currently supported by IMCE Wysiwyg API bridge that I have mentioned previously. Then you will have to enable this module in the module list (/admin/build/modules).

And then, in RTE profile in which you want to allow the access to IMCE (/admin/settings/wysiwyg/profile/), you will have to enable the new plug-in that IMCE Wysiwyg API bridge has added when it was installed. This plug-in is located in the list called "Buttons and plugins" and it is called "IMCE" as shown in Figure 1. The file manager is useful for the following modules in the case of TinyMCE, at least one of them should be enabled to be able to test the file manager from your RTE:

Editing form of a Wysiwyg API profile
Figure 1 - Activation of the IMCE plug-in in the Wysisyg API profile

Usage

Once the setup of these modules is complte and your RTE profile is updated, when you will edit content and you will try to, for example, add an image (for this to work, the Image plug-in of Wysiwyg API must be enabled in the corresponding profile) you will have access to a new button in the window where you select the image address as presented in the Figure 2.

Insert image form of TinyMCE with the browse button to access to the file manager
Figure 2
- Opening the file manager with the TinyMCE editor

When you will click on this button you will access the IMCE file manager and all its features. You can upload files to your Web server and then after selecting one, its URL will be automatically sent back to your RTE that will display it in the editing area.

Help Wysiwyg API !

You can find a donation module on the project page of Wysiwyg API.

 

Comments [2]

File upload function

strategictech's picture

Does anything need to be done to enable the file upload functionality?

IMCE profile, maybe ?

patrick.haederli's picture

Well, not really. The user you are logged in with needs to have a role that is able to upload files with IMCE module, it means that one of their role must be associated with a IMCE profile (/admin/settings/imce).

This is not explained here because it concerns IMCE configuration and it is not the topic of this article, other than that, everything is explained here. You should give me more details on what part is not working (Do you have the "Browse" icon in your editor ?).