DevNet

Jusqu'à la version 1.2.5 de Prestashop, malheureusement, le noyau n'intègre toujours pas dans ses versions finales, la possibilité d'uploader (transférer ou envoyer pour les moins habitués) des images et de les rendre utilisables directement lors de la saisie dans l'éditeur de texte amélioré TinyMCE proposé par défaut dans le BackOffice.

Pourtant, il n'est pas bien compliqué d'installer en quelques minutes une extension TinyBrowser à TinyMCE sur PrestaShop.

Pourquoi améliorer l'éditeur actuel de PrestaShop ?

D'après mes essais, TinyBrowser ne s'arrête pas à une simple modification sur l'uploader d'images. En effet il permet aussi de rendre possible l'ajout de fichiers multimédias de type Flash, Quicktime, Shockwave, Windows Media, Real Media.

La technique d'ajout d'image par défaut consiste à cliquer sur le raccourci dans le menu de l'éditeur (cf. Image 1). Après l'installation du module d'upload TinyBroswer, cette technique ne changera pas. Pour l'instant, seul l'ajout d'URL (lien web qui point directement sur le fichier image) est disponible, ce qui rend un peu difficile la mise en place rapide d'images personnelles (cf. Image 2).

La technique d'ajout de fichiers multimédias est équivalente à la précédente (cf. Image 3), et par défaut, se limite aussi à la proposition d'URL pour pointer vers les fichiers (cf. Image 4).

Malheureusement, ces techniques par URL sont certes très honorables et très fiables, mais ne sont pas faciles à comprendre pour des néophytes et surtout pas pratiques, car le phénomène d'upload est alors dissocié de l'ajout l'ajout d'image depuis l'éditeur.

L'idéal serai alors de garder la même technique d'ajout d'image actuelle (cf. Image 1 et Image 2), puisque les raccourcis sont déjà présents dans les barres d'outils de l'éditeur TinyMCE, et de l'améliorer avec la possibilité d'uploader les images (et les fichiers multimédias) depuis la même fenêtre (cf. Image 5).

Préparer le module d'upload

Je vais vous proposer une méthode simple et efficace pour mettre en place le module d'upload TinyBrowser sur l'éditeur TinyMCE utilisé dans le BackOffice de PrestaShop. Je vais m'appuyer sur l'éditeur disponible dans l'ajout ou l'édition des pages CMS. Dans le BackOffice, vous le trouverez dans l'onglet 'Outils' puis lien 'CMS'. Cette technique de mise en place est bien sûr la même pour tout autre éditeur TinyMCE du BackOffice, à condition de faire les modifications sur les bons fichiers. Ne vous inquiétez pas, je vous donnerez les éléments nécessaires valables jusqu'à la version 1.2.5.

Commençons par télécharger le module d'upload TinyBrowser, aussi appelé "plugin" dans TinyMCE. Vous pouvez l'acquérir directement dans sa version 1.41 : http://www.lunarvis.com/downloads/tinybrowser_1_41_6.zip. Si le lien est cassé, voici la page web contenant le lien à jour en fonction de l'évolution des versions : http://www.lunarvis.com/products/tinymcefilebrowserwithupload.php.

Dé-Zippez l'archive tinybrowser_1_41_6.zip et éditez le fichier /tinybrowser/config_tinybrowser.php

Les éléments de configuration indispensables sont certainement la langue, et les dossiers d'exploitation du "browser", à la manière d'une exploration de fichiers et de dossiers. Voici donc les variables à éditer :

// Set default language (ISO 639-1 code), fr : français, en : anglais, etc.
$tinybrowser['language'] = 'fr';
...
// File upload paths (set to absolute by default)
$tinybrowser['path']['image'] = '/img/'; // Image files location - also creates a '_thumbs' subdirectory within this path to hold the image thumbnails
$tinybrowser['path']['media'] = '/img/'; // Media files location
$tinybrowser['path']['file'] = '/img/'; // Other files location

J'ai choisi de spécifier pour chaque type de fichiers, le répertoire de départ /img/ de PrestaShop, qui contient par défaut les droits nécessaires à son usage. De plus, vous aurez la possibilité d'accéder aux images déjà "uploadées" dans le BackOffice (images des produits par exemple). En revanche, à vous de choisir votre propre dossier à utiliser pour le module, et pensez bien sûr à lui mettre les droits en écriture.

Pour les plus acharnés, je vous laisse regarder les fichiers config_tinybrowser.php en entier, pour personnaliser complètement le module à vos besoins.

Envoyer les fichiers du module d'upload

L'archive Zip contient donc le dossier tinybrowser, que vous devez uploader dans le répertoire de votre boutique PrestaShop /js/tinymce/jscripts/tiny_mce/plugins/

Cet upload doit bien sûr intégrer le fichier config_tinybrowser.php que vous venez de modifier.

Modification du code chargé d'initialiser TinyMCE

Il faut maintenant déclarer la liaison du module TinyBrowser au script existant TinyMCE, afin que l'éditeur prenne en compte les nouvelles options d'upload.

Pour notre exemple, j'ai donc choisi l'éditeur des pages CMS (onglet "Outils" puis lien "CMS"). Sur PrestaShop, le fichier de codes sources qui gère une partie du traitement de la page CMS du BackOffice est /[admin]/tabs/AdminCMS.php

[admin] : à remplacer par votre répertoire d'administration personnalisé.

PS : Je rappel que cette modification est valable pour tous les autres fichiers de codes sources qui gèrent l'initialisation du TinyMCE.

Remplacer dans /[admin]/tabs/AdminCMS.php le code suivant :

// TinyMCE
echo '
<script type="text/javascript" src="'.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript">
function tinyMCEInit(element)
{
$().ready(function() {
$(element).tinymce({
// Location of TinyMCE script

par :

// TinyMCE
echo '
<script type="text/javascript" src="'.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/jquery.tinymce.js"></script>
<script type="text/javascript" src="'.__PS_BASE_URI__.'js/tinymce/jscripts/tiny_mce/plugins/tinybrowser/tb_tinymce.js.php"></script>
<script type="text/javascript">
function tinyMCEInit(element)
{
$().ready(function() {
$(element).tinymce({
file_browser_callback : "tinyBrowser",
// Location of TinyMCE script

Et voici la nouvelle fenêtre TinyBrowser (cf. Image 6) qui apparait lorsque l'on clique sur le bouton "Naviguer" (cf. Image 5) :

Voilà ! Il n'y a rien de plus à faire ! Magique n'est-ce pas ?

Et les autres éditeurs du BackOffice de PrestaShop ?

Pour effectuer la même modification sur tous les éditeurs du BackOffice, voici les fichiers à modifier comme vu précédemment :

• CMS : Voir paragraphe précédent
• Produits (Résumé, Description) : fichier /[admin]/tabs/AdminProducts.php , ligne 1971 environ
• Fabricants (Description courte, Description) : fichier /[admin]/tabs/AdminManufacturers.php , ligne 131 environ
• Module Editeur de page d'accueuil (Texte d'introduction) : fichier /modules/editorial/editorial.php , ligne 126 environ

Vous pouvez aussi faire cette même modification à chaque fois qu'un module ou qu'une évolution de PrestaShop utilise TinyMCE comme éditeur de contenu texte.

[admin] : à remplacer par votre répertoire d'administration personnalisé.

Limite de cette solution

Malheureusement, même si cette solution est très attendue, elle reste néanmoins non conventionnelle face à la politique de mise à jour de PrestaShop puisqu'elle vous oblige à modifier des fichiers codes sources du noyau de la boutique. Ces fichiers sont malheureusement réinscrit avec le code en vigueur des mises à jour. Comme il est primordial d'effectuer régulièrement vos mises à jours, la solution consiste à refaire cette manipulation après chaque mise à jour.

Ou bien tout simplement, proposer à l'équipe PrestaShop d'adopter une fois pour toute une solution d'upload pour l'éditeur de texte dans le BackOffice.

Aujourd'hui je propose donc cette solution complète et fonctionnelle, qui je pense, ne pose aucun problème particulier.

Je travaille en parallèle sur l'amélioration de cette solution, afin d'intégrer de façon automatique la gestion de la langue, et aussi la configuration des dossiers d'upload à la volée, de manière à initialiser un TinyMCE pour un usage particulier.

Merci à l'équipe PrestaShop d'avoir été sensible à tout ce tutoriel.