Drupal est vraiment facile d’utilisation pour créer et gérer un site Web.

Mais un chose manque, en tout cas elle n’est pas intégrée dans les modules de base venant avec l’installation de Drupal : la gestion des images et photos !

Nous allons voir comment ajouter IMCE dans Drupal et le faire cohabiter avec TinyMCE pour nous rendre la vie bien plus facile !

TinyMCE est un éditeur HTML que l’on peut installer pour avoir une écriture facile des articles et pages : plus besoin de se plonger dans le code HTML

Vous connaissez peut-être tout ça, le code HTML, les balises… mais si vous ne voulez pas devoir vous taper la moindre mise à jour de vos sites Web, les utilisateurs/rédacteurs doivent pouvoir faire cela sans se plonger dans le code : ce n’est pas leur boulot ni dans leurs compétences (ils en ont d’autres : la gestion de l’info sur votre site, c’est eux !).

TinyMCE permet cela. Sans lui les articles seraient tous en texte simple, pas de couleur, pas de caractères gras, etc… à moins de se plonger dans le code HTML, ce qu’on veut éviter ici.

Parfait… sauf que, si TinyMCE est assez complet et gratuit, quand vous cliquez sur l’icone « Image » pour insérer une photo dans un article, TinyMCE vous réclame… l’emplacement exact sur votre serveur !

Franchement, ce n’est pas pratique ! Ca suppose que l’utilisateur sache :

• comment transférer (en ssh par exemple ?) des photos depuis son PC vers le serveur
• qu’il comprenne l’organisation des dossiers et sachent où mettre ses photos sur le serveur
• qu’il ait évidemment les autorisations voulues
• et aussi les programmes pour cela ! (FTP, SSH, Filezilla…)

Et bien… ce n’est pas gagné !

Comparé à cela, WordPress par exemple, plus orienté blog mais très complet, permet à un utilisateur de simplement transférer depuis son PC une photo avec quelques clicks souris, ou de la sélectionner dans les fichiers déjà transférés sur le serveur. Nettement plus simple !

Les gens de Moxiecode, la firme qui a développé TinyMCE, ont évidemment tenu compte de ce besoin ! Il existe 2 autres produits, qui vont s’intégrer avec TinyMCE : MCFileManager et MCImageManager qui vont s’occuper de ça et vous faciliter la vie.

Et il parait qu’ils font cela très bien ! Mais… le problème est que ces 2 produits ne sont ni libres ni gratuits ! Et le prix n’est pas négligeable (en tout cas pour moi)…

Essayons donc de trouver d’autres solutions :

• un autre éditeur pour Drupal : FCKeditor semble très bien pour ça : un peu moins joli que TinyMCE mais lui il inclu d’origine le transfert et la gestion des photos !
• un module séparé pour transférer les photos sur le serveur et les gérer
• ou mieux : un module de transfert et gestion des photos, mais qui peut s’intégrer dans TinyMCE (si vous voulez le conserver… le mieux est de faire un petit essais de FCKeditor et de comparer suivant VOS besoins)

Je n’ai pas terminé tous mes essais, car les solutions sont quand même assez nombreuses. Il suffit de passer quelques heures avec la liste des modules disponibles pour Drupal 6… mais j’ai décidé pour le moment d’essayer IMCE. Cela ne m’empéchera pas de tester d’autres choses ensuite, comme FCKeditor

IMCE semble correspondre à ce que je recherche : il permet de transférer (upload) vos images ou fichiers vers le serveur, et de gérer ces fichiers et les insérer dans vos articles, cela à partir d’une interface Web assez simple.

Installation de IMCE.

C’est assez classique (si vous avez l’habitude d’installer des modules et thèmes Drupal) :

• Télécharger le module en prenant l’adresse depuis le site Drupal
• le décompresser
• copier le dossier décompressé dans les modules Drupal
• activer le module dans l’administration de votre site
• donner les autorisations nécessaire aux utilisateurs devant l’utiliser

La partie en ligne de commande :

didier@monserveur:~/download/drupal/modules$ cd /home/didier/download/drupal/modules/

didier@monserveur:~/download/drupal/modules$ wget http://ftp.drupal.org/files/projects/imce-6.x-1.1.tar.gz

--03:28:14--  http://ftp.drupal.org/files/projects/imce-6.x-1.1.tar.gz
           => `imce-6.x-1.1.tar.gz'

Resolving ftp.drupal.org... 64.50.238.52, 64.50.236.52
Connecting to ftp.drupal.org|64.50.238.52|:80... connected.
HTTP request sent, awaiting response... 200 OK
Length: 61,264 (60K) [application/x-gzip]
100%[=================================================================================================>] 61,264       156.46K/s
03:28:15 (156.05 KB/s) - `imce-6.x-1.1.tar.gz' saved [61264/61264]

Décompression IMCE et copions le dans le dossier Durpal :

didier@monserveur:~/download/drupal/modules$ tar xvfz imce-6.x-1.1.tar.gz
imce/
imce/css/
imce/css/collapsed.png
...

cd /var/www/drupal/sites/all/modules/

cp -Rp /home/didier/download/drupal/modules/imce  .

Activons IMCE dans l’administration de votre site :

Indiquer quels utilisateurs peuvent utiliser IMCE :

L’installation de IMCE est terminée… mais il n’est pas encore utilisable. Il faut l’intégré dans TinyMCE.

La page setup du  site d’ IMCE donne un lien vers le forum Drupal.

La méthode indiquée demande d’ajouter quelques lignes dans un fichier template.php de vos thèmes. Cela ajoute un fonction permettant à TinyMCE d’appeler IMCE.

J’ai essayé, et ça fonctionne… en tout cas avec beaucoup de thèmes, mais pas avec tous.

En effet, il faut avoir un fichier template.php. Ce n’est pas le cas pour tous les thèmes.

S’il n’y en a pas dans le thème que vous avez choisi, il faut essayer différentes choses :

• créer ce fichier template.php
• ajouter les lignes de codes définisant cette fonction dans un autre fichier .php de votre thème (dans page.tpl.php ou node.tpl.php)

Cette solution ne fonctionne pas avec tous les thèmes, et surtout cela présente des problèmes importants :

• vous devez modifier votre ou vos thèmes
• dans le cas d’une installation Drupal multisites, vous avez peut-être installé des dizaines de thèmes, c’est vraiment génant de devoir modifier tous ces thèmes
• à chaque mise à jour d’un thème, il ne faut pas oublier de refaire l’ajout de ces lignes de codes
• et pire : pour les thèmes inclus de base dans Drupal, à chaque mise à jour de Drupal, il faut refaire cet ajout dans tous les thèmes inclus dans Drupal

Ce n’est quand même pas trop logique de devoir modifier des THEMES pour ajouter une fonctionnalité à un éditeur !

Pour cette raison, j’ai cherché une autre solution : chercher à modifier TinyMCE lui-même.

La solution est aussi simple, mais ne doit être appliquée qu’une seule fois dans TinyMCE.

Il faut ajouter ces lignes de code dans le module « drupal/sites/all/modules/tinymce/tinymce.module »

vi /var/www/drupal/sites/all/modules/tinymce/tinymce.module

<?php

/* Didier Misson : integration IMCE dans TinyMCE */

function phptemplate_tinymce_theme($init, $textarea_name, $theme_name, $is_running) {
  static $access, $integrated;

  if (!isset($access)) {
    $access = function_exists('imce_access') && imce_access();
  }

  $init = theme_tinymce_theme($init, $textarea_name, $theme_name, $is_running);

  if ($init && $access) {
    $init['file_browser_callback'] = 'imceImageBrowser';
    if (!isset($integrated)) {
      $integrated = TRUE;
      drupal_add_js("function
imceImageBrowser(fid, url, type, win)
{win.open(Drupal.settings.basePath +'?q=imce&app=TinyMCE|url@'+
fid, '', 'width=760,height=560,resizable=1');}", 'inline');
    }
  }

  return $init;
}

...

suite du module "tinymce.module"

...

Vous sauvez ce fichier.

Pour être certain que ces modifications soient actives, vider le cache de Drupal (dans « Administrer / Configuration du site/Performance », en bas de la page « Supprimer les données du cache »), et vider également le cache de votre navigateur.

Et cela devrait fonctionner.

Si vous créez un article ou une page, en insérant une image, vous avez maintenant une icone supplémentaire permettant d’accéder à IMCE :

Cette icone vous permet de transférer, insérer et gérer vos images bien plus facilement

Le transfert de fichier de votre PC vers le serveur se fait très simplement :

Sélectionner le fichier à transférer, cliquer sur « ouvrir », ensuite dans la fenêtre IMCE sur « Transfert de fichiers » pour envoyer ce fichier vers le serveur.

Il suffit ensuite de cliquer sur l’image que vous désirez insérer dans votre article (ou de cliquer sur « Send to TinyMCE ») pour que son adresse locale et sa tille (puisqu’elle est maintenant sur le disque dur du serveur) soient transmises à TinyMCE :

Vraiment, l’intégration de IMCE dans TinyMCE va vous faciliter la vie et vous faire gagner du temps

Articles relatifs

• Drupal : problème Optimisation Javascript et TinyMCE (0)
• Drupal 6 et TinyMCE (0)
• Drupal & TinyMCE : support langues (1)
• Upgrade Drupal (1)
• Premières photos du Drupalcampbe à Gand (0)

Un peu de tout

• Location de noms de domaine
• Contact

Un blog libre utilisant WordPress