Suivez-nous sur :

  • LinkedIn
  • YouTube

Intégration du module IMCE avec Wysiwyg API dans Drupal : imce_wysiwyg

Flux HexaLab

Connexion utilisateur

L'édition de contenu avec un éditeur riche, abrégé RTE en anglais, dans le gestionnaire de contenu Drupal (la branche 6.x) peut se faire grâce à des modules d'intégration spécifique à chaque éditeur (TinyMCE, FCKEditor, WYMeditor, etc.). Le choix d'un RTE dépend beaucoup des habitudes des utilisateurs finaux et des développeurs, mais tous les modules permettant cette intégration font appel aux mêmes procédés pour s'intégrer dans le gestionnaire de contenu (remplacement des zones de texte dans les formulaires d'édition de contenu) et donc beaucoup de code se trouve répété inutilement entre ces différents modules. C'est pour éviter cela que le module Wysiwyg API a été créé. Il propose une approche beaucoup plus générique pour l'intégration des RTE et permet même une utilisation simultanée de plusieurs éditeurs avec une gestion de profils par format d'entrée.

L'insertion d'images et de liens vers des fichiers à télécharger sont des tâches qui doivent rester simples, mais elles impliquent souvent le transfert de fichiers vers le serveur Web et également la gestion de ces fichiers. Tout ceci est possible dans Drupal grâce au module IMCE, c'est un gestionnaire de fichiers qui permet une administration précise des utilisateurs et de leurs accès aux fichiers transférés grâce à un système de profils. Les RTE proposent généralement une intégration pour un gestionnaire de fichiers grâce à une fonction callback (en Javascript) qui va permet à ce gestionnaire de renvoyer l'URL du fichier choisi à l'éditeur.

Après une longue discussion avec les différents développeurs de ces modules, aucun ne souhaitait intégrer du code relatif à d'autres modules dans leur propre module. C'est pourquoi cette discussion s'est terminée par la création d'un nouveau module : IMCE Wysiwyg API bridge (imce_wysiwyg). Ce nouveau module est relativement simple, il n'a aucun paramètre particulier et il permet l'intégration du gestionnaire de fichiers IMCE dans deux éditeurs riches actuellement : TinyMCE et FCKEditor. Sa première version (6.x-1.0) a été publiée le 4 mars 2009.

Installation

IMCE Wysiwyg API bridge dépend logiquement des modules Wysiwyg API et de IMCE, donc il faudra installer ces deux modules au préalable et au moins un des éditeurs  mentionnés précédemment qui sont actuellement supportés par IMCE Wysiwyg API bridge. Ensuite il suffit d'activer ce module dans la liste des modules (/admin/build/modules)

Puis dans le profil de l'éditeur dans lequel vous souhaitez rendre IMCE accessible (/admin/settings/wysiwyg/profile/), il faudra activer le nouveau plugin que IMCE Wysiwyg API bridge a ajouté lorsqu'il a été installé. Ce plugin se trouve dans la liste nommée "Buttons and plugins" et il est intitulé "IMCE" comme le montre la Figure 1. Le gestionnaire d'image étant utile pour les plugins suivants dans le cas de TinyMCE, au moins l'un d'eux devra être activé pour pouvoir tester le gestionnaire de fichier depuis votre RTE :

Formulaire d'édition du profil Wysiwyg API
Figure 1 — Activation du plugin IMCE dans le profile Wysisyg API

Utilisation

Une fois l'installation des modules terminée et le profil de votre RTE mis à jour, lorsque vous éditerez du contenu et que vous tenterez, par exemple, d'ajouter une image (pour ça le plugin Image de Wysiwyg API doit être activé dans le profil correspondant) vous aurez accès à un nouveau bouton dans la fenêtre de sélection de l'adresse de l'image comme présenté dans la Figure 2.

Formulaire d'ajout d'une image de TinyMCE avec le bouton d'accès au gestionnaire de fichiers

Figure 2 — Ouverture du gestionnaire de fichier depuis l'éditeur TinyMCE

Lorsque vous cliquerez sur ce bouton vous aurez accès au gestionnaire de fichiers IMCE et à toutes ses fonctionnalités. Vous pourrez ainsi transférer des fichiers vers votre serveur Web et ensuite après en avoir sélectionné une, son URL sera automatiquement renvoyée vers votre RTE qui se chargera de l'afficher dans la zone d'édition.

Aidez Wysiwyg API !

Vous trouverez un module de don sur la page de projet de Wysiwyg API.

Commentaires [3]

Portrait de gbert1

J'ai suivi ce tutoriel et cela a marché.
J'ai seulement eu un moment de frayeur parce que j'étais en édition en HTML filtré, mes images ne s'affichaient donc pas une fois insérées.
Il faut positionner "Input format" sur "Full HTML".
Merci pour cet excellent tuto.

Portrait de Buenav

Bonjour,
Tuto très intéressant. Merci pour les newbies ou presque qui se prennent le chou avec Drupal et ses modules ! J'ai installé IMCE, IMCE Wysiwyg Bridge et WYSYWYG. Quel est le chemin d'accès pour installer la version 2.6.5 de Fck Editor ? J'avais précédemment installé une autre version. Je teste pour l'instant ma config en local.
Merci de vos réponses.

Portrait de Patrick Haederli

Bonjour,
Il est donné lorsque vous vous connectez au chemin "/admin/settings/wysiwyg". Il y a un groupe de champs nommé "Installation instructions" qui donne les chemins à utiliser pour tous les éditeurs supportés.
Bonne continuation.