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é.