6 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 :

 public function displayForm()
 {
 
 $default_lang = (int)Configuration::get('PS_LANG_DEFAULT');

 $fields_form = array(
 'tinymce' => true,
 'legend' => array(
 'title' => $this->l('Champ TinyMCE'),
 ),
 'input' => array(
 'CHAMP_TINYMCE' => array(
 'type' => 'hidden',
 'name' => 'CHAMP_TINYMCE'
 ),
 'content' => array(
 'type' => 'textarea',
 'label' => $this->l('Texte du Champ'),
 'lang' => true,
 'name' => 'text',
 'cols' => 40,
 'rows' => 10,
 'class' => 'rte',
 'autoload_rte' => true,
 ),
 ),
 'submit' => array(
 'title' => $this->l('Save'),
 )
 );

 $helper = new HelperForm();
 $helper->module = $this;
 $helper->name_controller = 'demotutotinymce';
 $helper->identifier = $this->identifier;
 $helper->token = Tools::getAdminTokenLite('AdminModules');
 foreach (Language::getLanguages(false) as $lang)
 $helper->languages[] = array(
 'id_lang' => $lang['id_lang'],
 'iso_code' => $lang['iso_code'],
 'name' => $lang['name'],
 'is_default' => ($default_lang == $lang['id_lang'] ? 1 : 0)
 );

 $helper->currentIndex = AdminController::$currentIndex.'&configure='.$this->name;
 $helper->default_form_language = $default_lang;
 $helper->allow_employee_form_lang = $default_lang;
 $helper->toolbar_scroll = true;
 $helper->title = $this->displayName;
 $helper->submit_action = 'submitFormChamps';

 $helper->fields_value = $this->getFormValues();

 return $helper->generateForm(array(array('form' => $fields_form)));
 }

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 :

  // :: Ici on indique le contenu de la page "Configuration" du plugin, et ses messages (erreur & succès)
 public function getContent()
 {
 $output = '<h2>'.$this->displayName.'</h2>';

 // Si on envoie le formulaire "submitFormChamps"…
 if (Tools::isSubmit('submitFormChamps'))
 {
 // On récupère l'id des languages sur la variable $lang
 foreach (Language::getLanguages(false) as $lang) 
 // On assigne CHAMP_TINYMCE à la value de text_X (X = numéro de votre langue, ici "1")
 Configuration::updateValue('CHAMP_TINYMCE', Tools::getValue('text_'.(int)$lang['id_lang']), true); // IMPORTANT: true = autoriser les balises HTML dans la BDD !

 // Si il y a erreur…
 if (isset($errors) AND sizeof($errors))
 $output .= $this->displayError(implode('<br />', $errors));
 // Sinon, success ! :) On affiche donc le message de confirmation d'enregistrement du texte dans la BDD
 else
 $output .= $this->displayConfirmation($this->l('Modifications enregistrées'));
 }
 // On affiche le formulaire avec le champ TinyMCE via $this->displayForm();
 return $output.$this->displayForm();
 }

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) :

 public function getFormValues()
 {
 $fields_value = array();

 // On charge le Texte sauvegardé dans la colonne "value" de la Table "ps_configuration"
 $CHAMP_TINYMCE = Configuration::get('CHAMP_TINYMCE');

 foreach (Language::getLanguages(false) as $lang) // Si besoin d'utiliser la traduction
 $fields_value['text'][(int)$lang['id_lang']] = Tools::getValue('text_'.(int)$lang['id_lang'], '');

 // On load le contenu du textarea ("text_X", text_1 pour FR) qui servira à charger le contenu du champ TINYMCE
 $fields_value['text'][(int)$lang['id_lang']] = $CHAMP_TINYMCE;

 return $fields_value;
 }

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