TinyMCE:Introduction

Un article de Wiki.

TinyMCE est un logiciel pour insérer un éditeur de texte 'semblable à Word', dans une page web. Il permet d'ajouter de la mise en forme pour rédiger un article. Il fait partie des éditeurs WYSIWYG (What You See Is What You Get).

[modifier] Bases Techniques

Comme la plupart des autres éditeurs (HTMLArea, FCKEditor, etc...), le logiciel repose sur le langage JavaScript. L'une des principale difficultés vient du fait que JavaScript réagit différemment suivant le navigateur (Internet Explorer, FireFox, Opera... Safari).

TinyMCE essaye d'être aussi peu 'intrusif' que possible. Cela veut dire qu'une page web, qui s'appuyait avant sur un simple composant textarea pour entrer du texte, peut très facilement remplacer le textarea par l'éditeur tinyMCE. Et inversement, on peut aussi facilement enlever l'éditeur tinyMCE sans avoir à changer beaucoup de code.

Lorsque tinyMCE s'active, il cache le composant textarea et crée, exactement à sa place, un composant iframe. Ce composant iframe va recueillir toutes les actions de l'utilisateur (entrées clavier, boutons de mise en page, couper/copier/coller, etc...) et générer le code correspondant.

Initialement, le composant iframe permet d'insérer dans une page web, une autre page web, de manière transparente. Avec JavaScript, on peut créer/modifier complètement le contenu du composant iframe. Avec le composant textarea seulement, l'utilisateur devrait écrire et verrait le code HTML brut, alors que tinyMCE va générer et copier ce code HTML dans le composant iframe pour afficher le rendu final de l'article.

[modifier] TinyMCE et les composants Flash ou Vidéos

TinyMCE, avec son plugin Media, triche un peu pour insérer des composants Flash ou Vidéo. En fait, dans le iframe, il insère un composant div de classe tinyMceObject, puis une image de classe tinyMceFlash ou tinyMceVideo. Quand on utlise la fonction mceInsertContent, il ne faut donc pas insérer le code HTML final, mais passer par cette astuce!

[modifier] TinyFCK

En cherchant sur le forum WordPress-fr, j'ai entendu parler de TinyFCK: http://p4a.sourceforge.net/tinyfck

Il faut ajouter le code suivant dans le code appelant TinyMCE

function fileBrowserCallBack(field_name, url, type, win) {
	var connector = "../../filemanager/browser.html?Connector=connectors/php/connector.php";
	var enableAutoTypeSelection = true;
	
	var cType;
	tinyfck_field = field_name;
	tinyfck = win;
	
	switch (type) {
		case "image":
			cType = "Image";
			break;
		case "flash":
			cType = "Flash";
			break;
		case "file":
			cType = "File";
			break;
	}
	
	if (enableAutoTypeSelection && cType) {
		connector += "&Type=" + cType;
	}
	
	window.open(connector, "tinyfck", "modal,width=600,height=400");
}