Étiquette : tinyMCE

Vincent Lecomte
[JS] Récupérer le contenu d’un éditeur tinyMCE

[JS] Récupérer le contenu d’un éditeur tinyMCE

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

Dans 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. La méthode la plus simple reste de redéfinir […]

0 commentaire

Sources

Tout est bien décrit dans la documentation de référence.

[JS] Personnaliser la liste de styles dans tinyMCE

[JS] Personnaliser la liste de styles dans tinyMCE

Dans 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. La méthode la plus simple reste de redéfinir les styles dans la méthode d’initialisation de l’éditeur. Dans notre cas cela écrasera les valeurs par défaut pour n’afficher que ce qu’on désire.

tinymce.init(
{
 // ...

 toolbar : [ "bold italic underline | styleselect" ]
 style_formats: [
  {title: 'Blocks', items: [
     {title: 'Paragraph', block: 'p'}
  ]},  
  {title: 'Headers', items: [
     {title: 'Header 1', block: 'h1'},
     {title: 'Header 2', block: 'h2'},
     {title: 'Header 3', block: 'h3'},
     {title: 'Header 4', block: 'h4'},
     {title: 'Header 5', block: 'h5'},
     {title: 'Header 6', block: 'h6'}
  ]},     
 ],
 
 // ...
});

Le fait de modifier le contenu de “style_formats” affecte la liste déroulante qui s’affiche quand on ajoute l’option “styleselect” dans la barre d’outils (cfr. paramètre “toolbar“). Vous constaterez également qu’il est possible de créer plusieurs niveaux (ce qui permet visuellement d’obtenir des sous-menus).

Le paramètre “title” est évidemment essentiel. On y met le texte qui sera affiché à l’utilisateur. Il sera automatiquement traduit en fonction de la langue choisie dans la configuration. Les fichiers de langue sont stockés dans un sous-dossier du répertoire de tinyMCE.

Les autres paramètres qu’on peut définir sont :

  • inline : indique le nom de balise inline qui sera utilisé comme conteneur.
  • block : indique le type de balise block qui sera utilisé comme conteneur.
  • selector : indique à quel élément cela peut s’appliquer.
  • classes : indique les classes à associer au résultat.
  • styles : pour générer du CSS pour l’élément

Des exemples sont disponibles dans la documentation officielle.

A lire aussi : content formatting

[JS] Recharger un TA tinyMCE après appel AJAX

[JS] Recharger un TA tinyMCE après appel AJAX

Pas plus tard qu’aujourd’hui j’ai été confronté à un petit problème de rafraichissement de mes champs textarea pour lesquels j’utilise l’éditeur tinyMCE 4, un éditeur WYSIWYG permettant de saisir du texte et de le transformer en code HTML.

En effet, après un appel AJAX qui ajoutait des éléments textarea dans mon code, je rappelais la fonction tinymce.init(). Sauf qu’il n’y avait alors que les nouveaux champs qui étaient chargés…

Pour que cela fonctionne, j’ai simplement ajouté ceci, à la fin d’un appel AJAX ayant abouti à la création des nouveaux champs :

function f_initMce() 
{ 
	// C'est cette ligne qui a été ajoutée :-) 
	tinymce.EditorManager.editors = []; 
	
	// Et là on initialise. 
	tinymce.init( {
		// General options. 
		selector : "textarea.myMceClass", 
		theme : "modern",
		plugins : "mucharactercount wordcount paste", ... 
	}); 
}

Et voilà : tous les éléments textarea sont alors transformés même après l’appel qui effectue l’ajout de nouveaux champs dans ma page.

Edit du 18/10/2017 : attention car cela peut poser quelques problèmes à d’autres niveaux, il vaut mieux supprimer proprement chacun des éditeurs avec la méthode remove. En cas d’exception englober dans un try/catch.

Exemple :

$('textarea').each(function() 
{ 
	var ed = tinymce.get($(this).attr('id'));
	if (ed != null) 
	{
		try 
		{ 
			tinymce.remove(ed); 
		} 
		catch (ex) 
		{ 
			delete tinymce.EditorManager.editors[ 
				$(this).attr('id')
			]; 
		} 
	} 
});

N’hésitez pas à réagir si cela ne vous parait pas correct ou si vous avez d’autres effets de bord que je n’aurais pas détecté.