TinyMCE : Synchroniser manuellement les textareas natifs

Voici une problématique récurrente lors de l’utilisation de l’éditeur WYSIWYG TinyMCE : comment faire en sorte que les textareas utilisés pour la transformation en éditeur TinyMCE possèdent la valeur réelle du contenu de l’éditeur associé à un instant T.

Je m’explique, le fonctionnement de TinyMCE est le suivant :

• La page HTML contient une balise textarea,
• Un script JavaScript viens transformer cette balise textarea en éditeur TinyMCE,
• Le textarea original est donc masqué, mais toujours présent sur la page,
• TinyMCE injecte une iframe permettant d’afficher l’éditeur,
• Au moment de la soumission du formulaire, TinyMCE vient mettre à jour le contenu du textarea original afin que la valeur actualisée soit envoyée avec le formulaire.

Cela signifie simplement que le textarea original ne contient pas la bonne valeur avant que le formulaire ne soit soumis.

Cela peut être problématique si l’on souhaite réaliser manuellement la soumission du formulaire ou encore le valider avant de le soumettre puisque vos textareas contiendrons la valeur originellement placée dans ceux-ci.

Pour résoudre cette problématique, il existe une méthode permettant de trigger l’action qui synchronise la valeur des textareas avec la valeur des iframes juste avant la soumission du formulaire : tinyMCE.triggerSave();

Une fois cette méthode exécutée, vous pourrez normalement constater que vos textareas originaux contiennent la valeur actuelle des éditeurs TinyMCE.

Si vous avez besoin de maintenir synchronisé en permanence les éditeurs tinyMCE avec leur textarea associés, il faudra évidemment passer par un listener et plus d’informations peuvent être trouvées sur ce thread.