Discussion :

[Benzouye]

Bonjour à tous,

Je travaille en ce moment sur un userscript (avec Tampermonkey) pour me faciliter l'utilisation d'un site web. Ce site utilise TinyMCE v4.

Dans mon script je souhaite mettre en contenu par défaut au sein de l'éditeur TinyMCE (activeEditor). Je précise que ce n'est pas mon script qui charge et instancie TinyMCE ...

Actuellement je mets un setTimeout de 3 seconde pour être sûr que TinyMCE est instancié avant de l'utiliser :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
setTimeout( function(e) {
    tinyMCE.activeEditor.insertContent( 'test' );
}, 3000 );

Cela fait le job, mais ... en fait cela n'attends pas vraiment que TinyMCE soit prêt, et si cela prends plus de 3 secondes à la page pour se charger (cela arrive) alors j'ai une jolie erreur dans la console (tinyMCE is not defined) et le job n'est pas fait ... pas cool ...

J'ai donc essayé d'autres solutions, et j'en suis à faire un système de boucle super moche :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
waitForTinymce( function(e) {
	waitForEditor( function(e) {
		setTimeout( function(e) {
			tinyMCE.activeEditor.insertContent( 'test' );
		},100 );
	});
});
 
function waitForTinymce( callback ) {
	if( typeof( tinyMCE ) !== 'undefined' ) {
		callback();
	} else {
		setTimeout( function(e) {
			waitForTinymce( callback );
		},100);
	}
}
 
function waitForEditor( callback ) {
	if( tinyMCE.activeEditor !== null ) {
		callback();
	} else {
		setTimeout( function(e) {
			waitForEditor( callback );
		},100);
	}
}

Cela fonctionne en apparence, mais c'est moche et pas vraiment pertinent en fait ...

Ma question est donc : est-ce que vous connaissez un moyen d'utiliser le modèle événementiel pour attendre l'éditeur TinyMCE et pour travailler avec ? Si oui, quel événement dois-je écouter, et surtout comment l'implémenter dans mon userscript ?

D'avance merci !

[Watilin]

Bonsoir,
j’enfonce sans doute des portes ouvertes, mais as-tu essayé d’attendre les évènements DOMContentLoaded et load ?

En regardant dans la doc, je n’ai pas eu l’impression que TinyMCE est chargé de manière asynchrone. Regarde dans le code du site que tu veux enrichir, si la balise <script> chargée d’initialiser TinyMCE a un attribut async ou defer. Si elle n’en a pas, tu pourras probablement agir sur DOMContentLoaded. Sinon, il faut recourir à une bidouille comme tu as fait.

Il y a peut-être une solution à base de Object.defineProperty, mais je ne garantis pas son fonctionnement, et encore moins des performances optimales. L’idée est de mettre un « hook » sur le nom de variable tinymce, ce qui te permettra d’agir au moment précis où une valeur est donnée à cette variable.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
let _tinymce;
Object.defineProperty(window, "tinymce", {
  get() {
    return _tinymce;
  },
  set(value) {
    _tinymce = value;
    console.log("tinymce has been modified");
  },
  enumerable: true,
});

Un problème : si le site déclare tinymce avec le mot-clé let, ce ne sera pas une propriété de window et donc tu ne pourras pas agir dessus.

[Benzouye]

Merci pour ta réponse Watilin.

J'avais essayé load, mais je ne pouvais pas surcharger l'instanciation de l'objet TinyMCE ... Ou du moins les écouteurs ne fonctionnait pas ...
Je vais regarder DOMContentLoaded.

Après ton avis me "rassure" sur ma compréhension du problème ...

Je vais également regarder du côté de Object.defineProperty, mais je soupçonne que le problème reste le même qu'avec load en fait ...

Je reviens là dessus en début de semaine prochaine pour faire un retour.

Encore merci.