Si vous ne connaissez pas encore tinyMCE, il s’agit d’un éditeur WYSIWYG que vous pouvez intégrer à vos sites. Il est notamment très connu grâce à son utilisation dans WordPress. L’édition Community est gratuite mais il existe également des offres avec support et plugins premium.
Pour une raison ou une autre vous souhaitez peut-être récupérer le contenu d’un éditeur initialisé avant de l’envoyer au serveur. Cela est évidemment possible ! Bien que cet article serve avant tout de mémo il va également vous aider à ne pas plonger dans les méandres de l’énorme documentation de la librairie. Voyons ensemble comment procéder.
Obtenir l’instance d’éditeur
Il faut tout d’abord récupérer l’éditeur souhaité avec la méthode tinymce.get(). Celle-ci reçoit une chaine de caractères représentant l’identifiant du champ qui a servi pour l’initialisation de tinyMCE.
Supposons que vous partiez d’un champ de type textarea, avec l’attribut « id » contenant simplement « myTinyEditor » :
var med = tinymce.get('myTinyEditor');Cela renverra l’instance de l’éditeur, sinon null s’il n’a pas encore été initialisé.
Récupérer le contenu de l’éditeur
Sur l’instance de l’éditeur que vous venez de récupérer, il suffit d’utiliser getContent() pour retourner le contenu au format « brut » (donc en HTML, qui est généré par tinyMCE).
var contHtml = med.getContent();Remarque: si le champ est vide, c’est bien une chaine vide que vous obtiendrez.
Vous savez désormais comment récupérer le contenu d’un éditeur tinyMCE, bravo !
A lire également…
[JS] Personnaliser la liste de styles dans tinyMCE
0 commentaireDans l’éditeur tinyMCE, lorsqu’on choisit de dérouler le menu de sélection du format, on dispose d’éléments par défaut comme les en-têtes (h1 à h6), l’alignement ou bien même la mise en forme classique comme le « gras », « souligné » ou « italique ». Ce menu peut être personnalisé de différentes manières. Partager sur:
Sources
Tout est bien décrit dans la documentation de référence.
