5 Comments

Introduction

J’étais tranquillement en train de travailler pour un client sur un site propulsé par Prestashop, et j’avais besoin d’inclure des champs TinyMCE dans un des modules que je développe pour ce dernier.

Pas de problème pour manier les Text inputs et les Textareas, mais lorsque j’ai eu besoin de me renseigner sur le déploiement d’un champ TinyMCE, stupeur ! Aucun Tuto disponible, je trouve uniquement des Hacks sur des forums indiquants qu’il fallait appeler le fichier JS de TinyMCE et ainsi afficher ce dernier via quelques lignes de code.

Superbe, ça fonctionne très bien sauf que je n’utilise pas la fonction HelperForm proposée par Prestashop, et ça ressemble donc à du bricolage.

Après recherches, on m’indique qu’il suffit d’ajouter deux petites lignes dans la déclaration de l’HelperForm et le Textarea se transforme en TinyMCE. Nice ! Merci à @PrestaEdit pour l’astuce, mais je ne remercie pas la Doc de Prestashop qui ne l’indique nul part (sauf erreur de ma part !)

Comme j’aurais aimé tomber sur un Tuto m’expliquant cette fonctionnalité toute bête, je m’y colle pour vous 😉

Ici on va créer un petit Module Prestashop (1.5 & 1.6, je ne l’ai pas testé sur les versions inférieures) qui va simplement afficher le résultat du champ TinyMCE sur la Home.
Libre à vous de l’améliorer ou de vous en servir pour votre propre Module.

Ajouter le Champ TinyMCE

Dans la fonction displayForm, on va d’abord configurer notre champ, en ajoutant ces deux fameuses lignes dans l’array $fields_form :

– Ligne 7 : ‘tinymce’ => true,
– Ligne 24 : ‘autoload_rte’ => true,

Ce qui donne :

On appellera notre Champ TinyMCE « CHAMP_TINYMCE » (vous pouvez le modifier par un nom souhaité, mais assurez vous de bien modifier toutes les occurrences de la page pour éviter un bug).

Et voilà, vous avez maintenant un champ TinyMCE dans votre HelperForm.

champ_tinyMCE

Sauvegarder le contenu du Champ dans la BDD de Prestashop

On va maintenant sauvegarder le contenu du Champ sur la table ps_configuration de Prestashop :

Très important : lors de l’updateValue de « CHAMP_TINYMCE« , comme sur l’exemple ci-dessus il est nécessaire d’ajouter « true » avant de fermer la parenthèse pour autoriser la sauvegarde de toutes les balises HTML dans la table en question, sur la colonne « value« .

Pour récupérer le texte précédemment sauvegardé, dans la Fonction « getFormValues » il faut indiquer le nom de votre Champ créé, et stocké dans la BDD de Prestashop (CHAMP_TINYMCE) :

Enjoy !

Voilà pour les fondamentaux, je vous invite à regarder le code de ce petit Module pour mieux comprendre le mécanisme (j’ai mis des commentaires un peu partout ;)).

Un petit screen du résultat et le lien pour le télécharger :

Demo Module Prestashop TinyMCE

 

Télécharger le Module

Voir sur GitHub

A propos de l'Auteur

Hadrien

Webdesigner & Développeur Freelance. Sound Designer, grand technophile et Gamer averti.

http://hadrien.co

  • Pingback: Design | Pearltrees()

  • Benoit André

    Merci bcp, tu gères !

    • MrHadrien

      Merci, content d’avoir pu t’aider 🙂

  • Jean Philippe Faucon

    comment afficher se champ sur la page contact

  • Spaceshipone

    Bonjour,
    Merci pour ce tutoriel bien complet. J’ai juste une question concernant l’affichage sur le front. Comment choisir à quel endroit afficher le résultat sur la page d’accueil ?
    Cordialement