PDW File Browser – De l’upload d’images intégré à votre TinyMCE

Aujourd’hui je vais vous présenter un composant qui peut être facilement intégré à TinyMCE et qui propose d’ajouter un module d’upload de fichiers sur votre élément TinyMCE. J’ai découvert PDW File Browser via Caron, suite à l’article que j’avais fait concernant une documentation Fr de TinyMCE. Ce composant va vous permettre donc d’upload de fichiers, de gérer et créer des dossiers et de faire du multi-upload. Vous pourrez donc intégrer facilement vos images au contenu géré par TinyMCE.

pdw-file-browser-tinymce

Pour pouvoir utiliser ce composant, il va vous falloir télécharger tous les fichiers sur ce lien ou bien sur Sourceforge.

Une fois le dossier téléchargé, dé-zippez le et placé le dans la hiérarchie de votre site actuel, peut importe l’emplacement, positionnez le où il vous semble le plus judicieux qu’il soit.

Ensuite, il vous faut ouvrir le fichier config.php placé à la racine de ce dossier.
Puis modifiez les variables de paramètres comme vous le souhaités. La variable la plus importante est $uploadpath où vous devrez indiquer le chemin vers le dossier qui accueillera les fichiers, et ce chemin doit être écrit ainsi : ‘/images/upload/’ si votre dossier se trouve ici : http://www.domain.com/images/upload/ par exemple.

Ensuite, lors de l’appel de votre élément javascript tinymce pour son incorporation à un textarea vous devrez ajouter la méthode suivante :

file_browser_callback : "filebrowser"

Ce qui pourrait donner par exemple :

$().ready(function() {
   
    $('textarea#example1').tinymce({
      // Location of TinyMCE script
      script_url : "../javascript/tiny_mce/tiny_mce.js",
 
      // General options
      theme : "advanced",
      skin : "o2k7",
      plugins : "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",
      file_browser_callback : "filebrowser",
   
      // Theme options
      theme_advanced_buttons1 : "image, media, link",
      theme_advanced_buttons2 : "",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
     
      height : '300',
      width : '450'
 
    });
  });
  }

A la suite de cela il vous faudra donc intégrer une fonction qui ressemblerai à ça :

function filebrowser(field_name, url, type, win) {
   
    fileBrowserURL = "/path/to/file/browser/index.php?editor=tinymce&filter=" + type;
     
    tinyMCE.activeEditor.windowManager.open({
        title: "PDW File Browser",
        url: fileBrowserURL,
        width: 950,
        height: 650,
        inline: 0,
        maximizable: 1,
        close_previous: 0
      },{
        window : win,
        input : field_name
      }
    );

En remplaçant bien entendu l’attribut « fileBrowserURL » avec le bon chemin vers votre dossier PDW File Browser.

Ce qui donnerai au final :

$().ready(function() {
   
    $('textarea#example1').tinymce({
      // Location of TinyMCE script
      script_url : "../javascript/tiny_mce/tiny_mce.js",
 
      // General options
      theme : "advanced",
      skin : "o2k7",
      plugins : "safari, pagebreak, style, layer, table, save, advhr, advimage, advlink, emotions, iespell, inlinepopups, insertdatetime, preview, media, searchreplace, print, contextmenu, paste, directionality, fullscreen, noneditable, visualchars, nonbreaking, xhtmlxtras, template",
      file_browser_callback : "filebrowser",
   
      // Theme options
      theme_advanced_buttons1 : "image, media, link",
      theme_advanced_buttons2 : "",
      theme_advanced_toolbar_location : "top",
      theme_advanced_toolbar_align : "left",
     
      height : '300',
      width : '450'
 
    });
  });
 
  function filebrowser(field_name, url, type, win) {
   
    fileBrowserURL = "/path/to/file/browser/index.php?editor=tinymce&filter=" + type;
     
    tinyMCE.activeEditor.windowManager.open({
        title: "PDW File Browser",
        url: fileBrowserURL,
        width: 950,
        height: 650,
        inline: 0,
        maximizable: 1,
        close_previous: 0
      },{
        window : win,
        input : field_name
      }
    );    
  }

Ce qui aura pour effet de rajouter un icône parcourir, sur la ligne pour insérer l’adresse d’un fichier et vous pourrez cliquer dessus pour voir s’ouvrir une fenêtre de gestion de dossiers et fichiers.
Bien entendu, la langue est paramétrable dans la config et n’oubliez pas de donner les droits d’accès des dossiers d’upload sur votre serveur.

Lien vers la démo : http://www.neele.name/filebrowser/

Articles qui peuvent vous intéresser :

Comments
  1. Stev
  2. LudiKadmin
  3. lizarb
  4. Loki
  5. Loki
  6. LudiKadmin
  7. herrera
  8. LudiKadmin
  9. herrera
  10. LudiKadmin
  11. herrera
  12. herrera
  13. LudiKadmin
  14. herrera
  15. LudiKadmin
  16. Postfutur
  17. Postfutur
  18. Postfutur
  19. izkeo
  20. LudiKadmin
  21. izkeo
  22. LudiKadmin
  23. izkeo
  24. LudiKadmin
  25. izkeo
  26. LudiKadmin

Leave a Reply

Votre adresse de messagerie ne sera pas publiée. Les champs obligatoires sont indiqués avec *


*