Tiny mce

Résolu/Fermé
boulou70 - 30 janv. 2007 à 16:21
 1er-fois - 8 mars 2010 à 17:18
Bonjour à tous
J'ai télécharger tiny mce et je ne sais pas du tout comment l'installer ou l'intégrer dans une page html ??
je suis débutante bien sûr ;))
Merci de votre aide !
A bientôt
A voir également:

16 réponses

blackgod Messages postés 33 Date d'inscription mardi 4 novembre 2008 Statut Membre Dernière intervention 2 mai 2009 4
7 nov. 2008 à 18:17
En fait c'est bon, problème réglé.
Je met le code pour ceux que ça peut intéresser à l'avenir :

<html>
<head>
<script language="javascript" type="text/javascript" src="./jscripts/tiny_mce/tiny_mce_gzip.js"></script>
<link rel="stylesheet" href="tinymce_style.css" type="text/css" />
</head>
<body>
<script language="javascript" type="text/javascript">
tinyMCE_GZ.init({
	mode : "textareas",
	theme : "advanced",
	language : "fr",
	skin : "o2k7",
	skin_variant : "silver",
	fix_nesting : true,	
});

</script>
<script language="javascript" type="text/javascript">
<!--Configuration TinyMCE
tinyMCE.init({
		mode : "textareas",
		theme : "advanced",
		language : "fr",
		skin : "o2k7",
		skin_variant : "silver",
		fix_nesting : true,		
		
		//toolbar
		theme_advanced_layout_manager : "SimpleLayout",
		theme_advanced_buttons1 : "bold, italic, underline, |, styleselect, |, forecolor, |, justifyleft, justifycenter, justifyright, justifyfull, |, bullist, numlist",
		theme_advanced_buttons2 : "link, unlink, |, cut, copy, paste, |, cleanup",
		theme_advanced_buttons3 : "",
		theme_advanced_styles : "Titre1=titre1;Titre 2=titre2", //correspond to the styleselect, need style.css
		theme_simple_toolbar_location : "top",
		
		//styles.css
		content_css : "./tinymce_style.css",		
		
	});

	function texteUpload() 
	{
		//Récupération des données texte		
		var texte = tinyMCE.get('texte').getContent();
		texte = escape(texte);
		
		//Création de l'objet xhr		
		if(window.XMLHttpRequest || window.ActiveXObject) 
		{
			if(window.XMLHttpRequest) 
			{
				xhr = new XMLHttpRequest();
			} 
			else 
			{
				try {
						xhr = new ActiveXObject("Msxml2.XMLHTTP");
				} catch(e) {
						xhr = new ActiveXObject("Microsoft.XMLHTTP");
				}
			}
		}
		else {
		alert("Votre navigateur ne supporte pas l'objet XMLHTTPRequest, téléchargez un explorateur récent.");
		return;
		}
	   
		if(xhr && xhr.readyState != 0) 
		{
			xhr.abort(); 
		} 

		xhr.onreadystatechange = function() 
		{ 
				if(xhr.readyState == 4 && (xhr.status == 200 || xhr.status == 0)) 
				{					
					document.getElementById("loading").innerHTML = "";								
					document.getElementById("affichage").innerHTML = xhr.responseText;
					alert(xhr.responseText);
					
				} else if(xhr.readyState == 2 || xhr.readyState == 3) 
				{
					document.getElementById("loading").innerHTML = "<p>Chargement en cours</p>";
				}
		}

		xhr.open("POST", "text_upload.php", true);
		xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
		xhr.send('texte='+texte);	
	}

//-->
</script> 
<form method="post">
<textarea id="texte" name="texte"><?php echo $_POST['texteOK'] ;?></textarea>
<input type="submit" onclick="texteUpload();return false;"/>
</form>
<div id="affichage">
</div>
<div id="loading">
</div>
</body>
</html>



Quelques point à souligner :
-Dans l'exemple j'utilise la librairie gzip.

-Le code xhr peut être remplacé pour le votre. Dans mon cas je ne me suis pas cassé la tête étant donné que :
1- je débute en ajax ^^
2- je n'ai qu'un seul champ à récupérer

-penser à créer votre propre page text_upload.php, je n'indique pas le code ici puisque ce n'est pas ce qu'il y a de plus difficile à créer (masse de doc sur le net) et puis ce serait un peu hors sujet.

Attention, je précise que dans mon cas je n'utilise aucun plug in.
De plus, il reste encore bcp de choses à améliorer: Par exemple, il arrive que tinymce ne se charge pas du premier coup et nécessite un refresh.
Mais côté enregistrement et affichage après récupération des données, ça marche nickel.

Je poste principalement parcequ'il m'a fallut pas mal de tps pour réussir à le faire fonctionner. Je sais que les pros diront "oui bah y'a https://www.tiny.cloud/ , je suis d'accord.
Et c'est même grâce à ce site que j'ai fini par trouver. Mais non sans galère ! ^^

PS : c'est ouf qd mm, après coup je me rend compte que c'est super simple.... m'enfin c'est tjrs comme ça en programmation :)
8
problème réglé
merci
0
kalice Messages postés 3 Date d'inscription jeudi 6 septembre 2007 Statut Membre Dernière intervention 17 octobre 2007
17 oct. 2007 à 10:38
Salut,

Vous aurez toutes les infos sur le site ci-dessous:

https://www.tiny.cloud/docs/

En gros, il suffit de rajouter ceci dans votre page html:

<html>
<head>
<title>TinyMCE Test</title>
<script language="javascript" type="text/javascript" src="../jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<!-- form sends content to moxiecode's demo page -->
<form method="post" action="http://tinymce.moxiecode.com/dump.php?example=true">
<textarea name="content" cols="50" rows="15">This is some content that will be editable with TinyMCE.</textarea>
<input type="submit" value="Save" />
</form>
</body>
</html>

Puis, il faut rajouter un textArea dans votre page web, et le tour est joué.

++
4
kryoportail Messages postés 222 Date d'inscription dimanche 10 août 2008 Statut Membre Dernière intervention 22 mai 2014 125
21 sept. 2008 à 10:16
Bonjour tout le monde !

Si vous voyez TinyMce apparaitre dans votre première page, c'est que ça marche....

Le problème c'est que vous n'avez pas compris que TinyMce est un composant Javascript capable de générer du HTML à partir de la présentation que vous faites...

Or si vous n'exploitez pas les données générées par Tinymce, cela ne fonctionnera jamais !...
Pour afficher le résultat que vous avez composé avec TinyMce, il vous faudra enregistrer le code HTML généré dans un fichier ou dans une base de données.

La page 2, chargée d'afficher la page que vous avez réalisé doit récupérer des données et les incorporer dans la page...

Bref, pour réaliser cette opération vous aurez besoin d'un langage de programmation orienté serveur comme PHP, ASP, Coldfusion, et bien d'autres...

Note : FCKEditor est développé sur la base de TinyMce, et c'est exactement le même principe, alors je suis pas sur que cela change grand chose...

Voilà, j'espère vous avoir éclairé !

Amicalement,
S@M...
http://kryoportail.ath.cx
2
Bonjour,
J'ai le même problème que 007fbi,
pas de soucis pour l'installation de TinyMCE sur mon site seulement le souci, c'est que quand on envoit la page tinymce, elle s'affiche super bien sur leur site ("http://tinymce.moxiecode.com/dump.php?example=true") mais pas sur une page perso!

Que doit on mettre dans cette page 2 pour afficher le résultat du formulaire "tinymce" de la page 1????
Connaissez-vous un tutorial très bien expliqué pour réaliser une mise en page dynamique en ligne de ce type :

PAGE 1 (avec TINYMCE) pour la mise en page (htaccess administrateur) -----> affichage du résultat dans une PAGE 2 d'un site web ??????????

Merci pour vos réponses

JE CRAQQUUUUUEE !!!!!
1

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
cocoLeNain Messages postés 29 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 12 mai 2008 2
28 août 2007 à 21:05
As-tu reussi à l'intégrer ? car je me pose la même question
0
cocoLeNain Messages postés 29 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 12 mai 2008 2
17 oct. 2007 à 10:42
merci, pour ta reponse.
Mais j'avais reussi et j'ai completement oublié de fermer ce post.
merci quand même.
0
Personnellement, je n'arrive pas à faire fonctionner ce tiny mce si je respecte ce qui est écrit plus haut.
Pourriez-vous tenter un descriptif un peu plus détaillé pour un novice.
Merci
0
voici mon code

+ javscript TinyMCE
+ css TinyMCE
<script>
tinyMCE.init({
theme : "advanced",
mode : "textareas",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom",
content_css : "example_advanced.css", extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
width:"500px",
height:"250px"
});
</script>
</head>
<body>

<textarea id="descriptif1" rows="" cols="" name="descriptif" style="display: none;"/>

</body>
</html>

j'espère que ça pourra t'aider
0
Merci pour ce code.
Toutefois, il doit y avoir un truc "énorme" que je ne vois pas puisque ça ne fonctionne pas (en local avec MovAmp).
Alors pour être hyper précis :
Imaginons que je souhaite gérer le contenu de la page 1.html, qui est dans le dossier www/mon_site/
La page 1.html existe déjà.

Dans localhost/www/ je crée un dossier "tinymce" contenant l'application dézippée,

Entre <head> et </head> j'ajoute le code
<script>
tinyMCE.init({
theme : "advanced",
mode : "textareas",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom",
content_css : "example_advanced.css", extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
width:"500px",
height:"250px"
});
</script>


Puis entre les balises <body> et </body> je pose:
<textarea id="descriptif1" rows="" cols="" name="descriptif" style="display: none;"/>

C'est ça ?

Merci
0
t as essayé de supprimer <-- style="display: none;" -->
MDR... si tu as bien appelé le fichier tyni et fait un copier coller de l'init....ca marche sur.
0
cocoLeNain Messages postés 29 Date d'inscription mardi 12 juin 2007 Statut Membre Dernière intervention 12 mai 2008 2
14 déc. 2007 à 16:30
il faut juste ajouter

<script src="http://raveon.fr/javascript/tinymce/jscripts/tiny_mce/tiny_mce.js" type="text/javascript">
</script>
<script src="http://raveon.fr/javascript/tinymce/jscripts/tiny_mce/themes/advanced/editor_template.js" type="text/javascript" language="javascript">
</script>
<script src="http://raveon.fr/javascript/tinymce/jscripts/tiny_mce/themes/advanced/langs/en.js" type="text/javascript" language="javascript">
</script>
<script src="http://raveon.fr/javascript/tinymce/jscripts/tiny_mce/langs/en.js" type="text/javascript" language="javascript">
</script>
<link type="text/css" rel="stylesheet" href="http://raveon.fr/javascript/tinymce/jscripts/tiny_mce/themes/advanced/css/editor_ui.css">
</link>
<script src="http://raveon.fr/javascript/tinymce/jscripts/tiny_mce/plugins/table/editor_plugin.js" type="text/javascript" language="javascript">
</script>
<script src="http://raveon.fr/javascript/tinymce/jscripts/tiny_mce/plugins/table/langs/en.js" type="text/javascript" language="javascript">

ce sont les fichiers javascripts et css de Tiny MCE
0
Très exactement pour que ça fonctionne tu dois ajouter ça dans ton head:

<script language="javascript" type="text/javascript" src="tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
tinyMCE.init({
theme : "advanced",
mode : "textareas",
theme_advanced_toolbar_location : "top",
theme_advanced_toolbar_align : "left", theme_advanced_path_location : "bottom",
content_css : "example_advanced.css", extended_valid_elements : "a[href|target|name]",
plugins : "table",
theme_advanced_buttons3_add_before : "tablecontrols,separator",
theme_advanced_styles : "Header 1=header1;Header 2=header2;Header 3=header3;Table Row=tableRow1", // Theme specific setting CSS classes
width:"500px",
height:"250px"
});
</script>

Non, ce n'est pas la même chose que ce qui est écrit plus haut. C'est une combinaison des deux postes de réponses précedents avec un changement important: le lien vers le fichier tiny mace. src="tinymce/jscripts/tiny_mce/tiny_mce.js".
Il faut mettre ce lien là pour le faire marcher en local.
Voila ça marche très bien chez moi et c'est le code exacte que j'ai mis. @+
0
C'est OK !!
ça fonctionne,
je viens d'installer CMS Made Simple, il intègre Tiny MCE et se configure facilement !

Voilà le lien :

http://www.cmsmadesimple.fr/
0
salut,

moi je suis tout à la lettre et il y a rien qui se passe, je suis sur de passer à côté de quelque chose mais je ne sais pas quoi . Mon textarea ne bouge pas, il a la même allure !! ;-)

Quelqu'un peut il m'aider ?
merci.
0
t'a pensé a faire un form qui envoie le truc a la bonne adresse?pour recuperer les données apres tu fais un <?php echo $_post['nomdetontextarea']; $> dans la page ciblée.
0
blackgod Messages postés 33 Date d'inscription mardi 4 novembre 2008 Statut Membre Dernière intervention 2 mai 2009 4
7 nov. 2008 à 14:06
Bonjour bonjour,

je buche depuis quelque jours déjà sur l'intégration de TinyMce.
En soit, pas de problème pour l'affichage, par contre pour l'enregistrement c'est tout autre chose.

J'ai testé plein de solutions, et soit j'ai un contenu vide d'uploadé dans ma BDD, soit j'ai le contenu mais en double, soit j'ai juste l'objet...

Enfin bref, tout ça pour dire que si quelqu'un avait une astuce ou quelques lignes de code pour un upload en bon et du forme ce serait parfait.

Je détail tout de même un peu :
au début j'utilisais le plug in "Save", avec un save_callback qui pointait sur mon xhr.
Le problème c'est que dans mon xhr je récupérais le tinyMCE.getContent et appliquais un escape.

Dans ce cas là, pas de problème je récupère le contenu mais en double.
Je me doute que cela est du au fait que je récupérais le contenu de base de tinymce + 1 contenu généré par le getContent.

Mais le hic c'est que si je n'utilise pas getContent alors mon content reste sous forme objet ...

Du coup j'ai laissé de côté le xhr et essaye d'utiliser la fonction tinymce.util.XHR.send, mais j'avoue avoir des notions javascript sans être un pro. Et j'ai du mal à utiliser correctement tout les composant de cette fonction.
A l'heure actuel, je pointe vers ma page upload.php et crée le champ. Mais le champ est vide... encore uen fois...

Quelqu'un pour m'aider s'il vous plait ?
0
Cette fois je laisse tomber et vais retourner chez FCK, même si celui-là ne sais pas travailler dans du html.

Si quelqu'un peut m'envoyer des exemples concrets de Tiny, qui fonctionnent, du style :
je tape mon texte dans la page 1.html et ça met à jour la page 2.html
=> Soyez les bienvenus.

Merci CocoLeNain d'avoir tenté de m'aider
-2