[Résolu] Utiliser TinyMCE avec HelperOptions

[tesial]

Es-ce que quelqu'un sais comment utiliser TinyMCE (l'éditeur wysiwyg) avec HelperOptions sur un Textarea pour permettre l'utilisation du HTML?

 

Voici un example concret basé sur un AdminController fictif:

 

class AdminXYZController extends AdminXYZControllerCore

{

	public function __construct()

	{

		parent::__construct();


		$this->fields_options['content'] = array(

			'title' =>	$this->l('My field set'),

			'icon' =>	'icon-bullhorn',

			'fields' => array(

				// ... some fields definition ...

				'PS_TESIAL_MM_TEXT' => array(

					'title' => $this->l('Field title'),

					'desc' => $this->l('Field description'),

					'validation' => 'isCleanHtml',	// Don't know if it's actually working

					'type' => 'textarea',			// Telling it's a textarea

					'cols' => '30',

					'rows' => '5',

					'tinymce' => true				// not taken into account

				),

				// ... other fields definition ...

			),

			'submit' => array(

				'title' => $this->l('Save')

			)

		);

	}

}

Pour simplifier l'example, concidérons que le controller overrided est bien installé et est fonctionelle. Le formulaire s'affiche correctement.

 

Deux problèmes:

• Le HTML contenu dans le text est enlevé lors du submit. Il s'agit du comportement par défaut du parent.
  
• TinyMCE ne peut pas être activé (le code ajoutant les js et css ne sont pas présent dans le HelperOptions mais bien dans le HelperForm, copier ce code ne résoud pas le problème, il faut tout de même activer tinyMCE avec tinySetup()).
  

 

Edited August 22, 2014 by tesial (see edit history)

[DevNet]

Salut,

 

Tu peux t'inspirer des classes existantes dans les controllers :

					array(
						'type' => 'textarea',
						'label' => $this->l('Description'),
						'name' => 'description',
						'autoload_rte' => true,
						'lang' => true,
					),

A+

[J. Danse]

Sauf que comme mentionné dans le premier message, très complet qui plus est, ça ne fonctionnera pas. Il s'agit d'un HelperOptions et non d'un HelperForm, sur le coup.

 

Il faut se baser sur la classe du HelperForm, qui parcoure les types de champs pour inclure tel ou tel fichier JS, selon moi.

 

La méthode generate() inclus le tout comme suit:

public function generate()
	{
		$tinymce = true;
		foreach ($this->fields_form as $fieldset_key => &$fieldset)
		{
			if (isset($fieldset['form']['tabs']))
				$tabs[] = $fieldset['form']['tabs'];

			if (isset($fieldset['form']['input']))
				foreach ($fieldset['form']['input'] as $key => &$params)
				{
					// If the condition is not met, the field will not be displayed
					if (isset($params['condition']) && !$params['condition'])
						unset($this->fields_form[$fieldset_key]['form']['input'][$key]);
					switch ($params['type'])
					{
						case 'textarea':
							if ($tinymce)
							{
								$iso = $this->context->language->iso_code;
								$this->tpl_vars['iso'] = file_exists(_PS_CORE_DIR_.'/js/tiny_mce/langs/'.$iso.'.js') ? $iso : 'en';
								$this->tpl_vars['path_css'] = _THEME_CSS_DIR_;
								$this->tpl_vars['ad'] = __PS_BASE_URI__.basename(_PS_ADMIN_DIR_);
								$this->tpl_vars['tinymce'] = true;

								$this->context->controller->addJS(_PS_JS_DIR_.'tiny_mce/tiny_mce.js');
								$this->context->controller->addJS(_PS_JS_DIR_.'tinymce.inc.js');
								$tinymce = false;
							}

Attention, j'ai volontairement laissé le seul code qui nous intéresse sur base de la demande, il y a du code avant et après celui-ci, au sein de la méthode. C'est volontaire, c'est pour indiquer où chercher.

[tesial]

J'ai essayé mais j'ai eu quelques soucis avec cette technique (les tpl_var ne se chargaient pas car la template options.tpl associée ne les chargais pas, tinySetup n'était pas appelé, ...).

 

Ce que j'ai fait à la place:

1. Surchargé la méthode renderOptions pour:
   1. 1) appeler le parent
   2. 2) ajouter les variable nécessaire (iso, path_css, ad et tinymce (bien que ce dernier soit inutile)) 
   3. 3) ajouter les js et css (via addJS et addCSS)
2. Dans ma template, ajouter un tag javascript dans le block "defaultOptions" pour charger tinyMCE après avoir ajouter la class rte+autoload_rte a tout les textarea dons le nom commence par le namespace que j'utilise pour mes fields.
3. Dans les fields_options, ajouter "'html' => true" au textarea
4. Surchargé la méthode processUpdateOptions pour ajouter le "true" lors du stockage des value (si html = true)

 

Ceci dit, le dernier point est de l'overkill car on peut creer une méthode updateOption[FieldNameInCamelCase] (dans le controller qui surcharge AdminXYZControllerCore) et qui effectue la sauvegarde à la place de l'ancetre (en spécifiant le "true" lors de l'updateValue).

 

Voici donc les grandes ligne, après j'ai aussi géré l'aspect multishop avec le toggle de fieldset et le toggle d'input (la checkbox devant chaque ligne) pour activer/désactiver le textarea ainsi que tinymce.

 

Merci de votre aide, vous m'avez mis sur la bonne piste.

 

PS. Plus d'info sur le topic en english