Tiny MCE - De A a Z s'il vous plais :)

Sujet résolu

28 décembre 2009 à 13:28:52

Bonjour tout le monde. J'espère poster dans la bonne section ! J'hésitais un peu avec php, mais a priori, c'est du Javascript dont il s'agit

Alors, voilà mon problème :

J'ai entendu parler d'un éditeur de texte, appeler Tiny MCE.
J'ai fait des recherches, télécharger un dossier, et fait ce qu'on me demandait de faire, à savoir copié ce code :

<script language="javascript" type="text/javascript" src="tinymce_3_2_7/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script language="javascript" type="text/javascript">
 tinyMCE.init
 (
 {
  theme : "advanced",
  mode : "textareas"
  }
  );
 </script>

dans ma balise head. Il était stipulé que cela transformerait tous mes textareas en editeurs de texte magiques et magnifiques.
Malheureusement, non.

Si vous pouviez m'expliquer comment obtenir un éditeur de texte tinyMCE fonctionnel je vous en serait très reconnaissant !

Golmote

28 décembre 2009 à 14:47:11

Chez moi aucun souci avec ce code :

<script src="../tinymce_3_2_7/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>
<script>
tinyMCE.init({
  mode : 'textareas',
  theme : 'advanced'
});
</script>

<textarea></textarea>

La console d'erreur indique quelque chose ?

Es-tu sûr du chemin du fichier js ?

Que se passe-t-il si tu mets alert(tinyMCE); juste avant le code d'initialisation ?

Dokéco

28 décembre 2009 à 14:58:13

Finalement, j'ai réussi à le faire fonctionner. Mais voilà le problème :

Image utilisateur

Je m'excuse pour la qualité du screen. Si jamais vous ne voyez pas , le problème est le positionement des boutons du script. :/

Golmote

28 décembre 2009 à 15:06:01

Et ton code, il ressemble à quoi ?

(JavaScript, et la partie HTML qui concerne le textarea)

Dokéco

28 décembre 2009 à 15:25:39

Voilà le code dans son intégralitée, je ne sais trop où chercher.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
    
	<head>
       <title>UseBook - Accueil</title>
       <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
	   <link rel="stylesheet" media="screen" type="text/css" title="Design" href="seconde.css" />
	   <link rel="shortcut icon" href="UseBook_ico.ico" type="image/x-icon"/>
		<link rel="icon" href="UseBook_ico.ico" type="image/x-icon"/>
<script type="text/javascript" src="tinymce_3_2_7/tinymce/jscripts/tiny_mce/tiny_mce.js"></script>

<script type="text/javascript">
	tinyMCE.init({
		// General options
		mode : "textareas",
		theme : "advanced",
		plugins : "safari,pagebreak,style,layer,table,save,advhr,advimage,advlink,emotions,iespell,inlinepopups,insertdatetime,preview,media,searchreplace,contextmenu,paste,directionality,noneditable,visualchars,nonbreaking,xhtmlxtras,template,wordcount",

		// Theme options
		theme_advanced_buttons1 : "save,newdocument,|,bold,italic,underline,strikethrough,|,justifyleft,justifycenter,justifyright,justifyfull,styleselect,formatselect,fontselect,fontsizeselect",
		theme_advanced_buttons2 : "cut,copy,paste,pastetext,pasteword,|,search,replace,|,bullist,numlist,|,outdent,indent,blockquote,|,undo,redo,|,link,unlink,anchor,image,cleanup,help,code,|,insertdate,inserttime,preview,|",
		theme_advanced_buttons3 : "tablecontrols,|,hr,removeformat,visualaid,|,sub,sup,|,charmap,emotions,iespell,media,advhr,|,print,|,ltr,rtl,|,fullscreen",
		theme_advanced_buttons4 : "insertlayer,moveforward,movebackward,absolute,|,styleprops,|,cite,abbr,acronym,del,ins,attribs,|,visualchars,nonbreaking,template,pagebreak",
		theme_advanced_toolbar_location : "top",
		theme_advanced_toolbar_align : "left",
		theme_advanced_statusbar_location : "bottom",
		theme_advanced_resizing : true,

		// Example content CSS (should be your site CSS)
		content_css : "seconde.css",

		// Drop lists for link/image/media/template dialogs
		//template_external_list_url : "lists/template_list.js",
		//external_link_list_url : "lists/link_list.js",
		//external_image_list_url : "lists/image_list.js",
		//media_external_list_url : "lists/media_list.js",

		// Replace values for the template plugin
		template_replace_values : {
			username : "Some User",
			staffid : "991234"
		}
	});
</script>
   </head>
	
	<body>
		<div class="page" style="height:200px;">
			<div class="Banniere">
			<img src="logo_usebook.png">
				<div class="Menu">
					<p style="position:relative;top:-15px;">
						<a href="index.php" class="link_menu" style="position:relative;left:20px;">Accueil</a>

						<a href="index_cours.php" class="link_menu" style="position:relative;left:30px">Interface Cours</a>
						<a href="index_communaute.php" class="link_menu" style="position:relative;left:40px">Communauté</a>
						<a href="tchat_room.php" class="link_menu" style="position:relative;left:50px;">T'chat Room</a>
						<a href="events.php" class="link_menu" style="position:relative;left:60px;">Evènements</a>
						<a href="sign_in.php" class="link_menu" style="position:relative;left:70px;">Inscription</a>
					</p>

				</div>


			</div>
			<div class="Connexion">
				<fieldset id="field_connexion">
				<legend id="legend_connexion">Connexion</legend>
				<form method="post" action="validation_connexion.php">
				<label id="label_connexion">Identifiant
				<input type="text" id="input_connexion" name="Identifiant">

				</label>
				<label id="label_connexion">Mot de Passe
				<input type="password" id="input_connexion" name="MDP">
				</label>
				<input type="submit" id="submit_connexion">
				</form>
				</fieldset>
			</div>


			
			
			<p class="Paragraphe" style="height:80px;position:relative;left:200px;">
			Vous vous trouvez actuellement dans la page d'interface de cours, les cours sont classés par matière puis par catégorie : Cours, Synthèse puis Fiche d'Aide.<br/>
			Tout d'abord, choississez si vous voulez consulter un cours ou en rédiger un.</p>
			<a href="cours_consulter.php" style="position:relative;top:-12px;left:205px;">Consulter un cours</a>
			<a href="cours_rediger.php" style="position:relative;top:-12px;left:225px;">Rediger un cours</a>
			<div class="rediger">
			<fieldset style="font-size:12px;-moz-border-radius: 10px;border:1px #5cb5e4 solid ;">

			<legend style="font-size:12px;">Informations</legend>
			<form method="get" action="cours_rediger.php">
			   <label>Matière : </label>
			   <select name="matiere" id="matiere" style="-moz-border-radius: 2px;border:1px #5cb5e4 solid;background-color:white;color:black;font-size:12px;">
				   <optgroup label="Lettres">
					   <option value="Francais">Français</option>
					   <option value="Histoire">Histoire</option>

					   <option value="Geo">Geographie</option>
				   </optgroup>
				   <optgroup label="Sciences">
					   <option value="Maths">Mathématiques</option>
					   <option value="Physique">Physique</option>
					   <option value="Chimie">Chimie</option>
					   <option value="S.V.T">S.V.T</option>

				   </optgroup>
				   <optgroup label="Langues">
					   <option value="Anglais">Anglais</option>
					   <option value="Allemand">Allemand</option>
					   <option value="Anglophone">Anglophone</option>
				   </optgroup>
				   <optgroup label="Options">

						<option value="S.E.S">S.E.S</option>
						<option value="MPI">MPI</option>
					</optgroup>
			   </select>
				<input type="submit" value="Ok" style="-moz-border-radius: 6px;border:1px #5cb5e4 solid;background-color:white;color:#5cb5e4;">
			   </form>
			   						<form method="get" action="cours_rediger.php?matiere=Francais">
						<label style="position:relative;left:10px;">Type : </label>

						<select name="type" id="type" style="-moz-border-radius: 2px;border:1px #5cb5e4 solid;background-color:white;color:black;font-size:12px;position:relative;top:2px;position:left:10px;">
						<option value="Cours">Cours</option>
						<option value="Synthèse">Synthèse</option>
						<option value="Fiche">Fiche d'aide</option>
						</select>
						</fieldset>
						<fieldset  style="font-size:12px;-moz-border-radius: 10px;border:1px #5cb5e4 solid ;">

						<legend>Contenu</legend>
						<textarea style="position:relative;left:-100px"></textarea>
						</fieldset>
						</form>
									   

			
			
			</div>
			

		
			
			<div class="Foot">
			<!-- Contact, livre d'or, plan, bug -->
			</div>
























		</div>
	</body>
</html>

Desolé pour la totale imprécision , mais au moins, tu auras tout

Merci bien.

Golmote

28 décembre 2009 à 16:22:54

Hm... j'aurais tendance à dire que c'est ton CSS qui doit faire foirer l'éditeur...

Montre ton fichier CSS stp.

Et si tu veux bien, édite ton message précédent en mettant le code HTML généré de la page (la source, quoi), plutôt que le PHP, ce sera moins long et plus lisible.

Dokéco

28 décembre 2009 à 16:26:44

Voilà pour mon css.
Il y a tout.

.page
{
	background-color:#3770c6;
	border:2px outset black;
	width:800px;
	height:1024px;
	position:relative;
	top:0px;
	left:100px;
}
.Banniere
{
	width:800px;
	height:150px;
	position:absolute;
	top:5px;
	left:5px;
}
.Connexion
{
	position:relative;
	top:0px;
	left:300px;
	width:500px;
	height:85px;
}
#label_connexion 
{
	font-size: 10px;
	
}
#submit_connexion
{
	width:50px;
	font-size:8px;
}
#input_connexion:focus
{
	background-color:#85A8DD;
}
#field_connexion
{
	background-image:url('connexion_background.png');	
}
#legend_connexion
{
   font-family: Arial, "Arial Black", Georgia, "Times New Roman", Times, serif;
   color: #090c3e;
   font-weight: bold;
}
.Menu
{
	width:780px;
	border:1px outset blue;
	height:30px;
	background-image:url('connexion_background2.png');
	position:relative;
	top:10px;
}
.link_menu
{
	font-size:20px;
	font-family:comic sans ms;
	text-decoration:none;
	color:#132848;
}
.link_menu:hover
{
	background-image:url('menu_link_background.jpg');
	border:0.5px solid #67b4db;
}
.link_menu:visited
{
	text-decoration:none;
	color:#132848;	
}
.sous_Menu
{
	font-size:10px;
	width:780px;
	border:1px outset blue;
	height:25px;
	background-image:url('connexion_background.jpg');
	position:relative;
	top:20px;
	left:5px;
}
.sous_link_menu
{
	font-size:16px;
	font-family:comic sans ms;
	text-decoration:none;
	color:#1d621c;
	position:relative;
	top:6px;
}
.sous_link_menu:hover
{
	background-image:url('menu_link_background.jpg');
	border:0.5px outset #67b4db;
}
.sous_link_menu:visited
{
	text-decoration:none;
	color:#1d621c;	
}
.News
{
	position:absolute;
	top:210px;
	left:400px;
	width:380px;
	height:300px;
	border:2px outset white;
}
.New
{
	border:1px solid black;
	background-image:url('connexion_background.jpg');
	font-size:12px;
}
.Paragraphe
{
	border-top:1px black solid;
	border-bottom:1px black solid;
	overflow:auto;
	width:400px;
	position:relative;
	top:20px;
	left:5px;
	text-align:justify;
	font-size:10px;
	text-indent:5px;
}
#Mozilla:
{
	color:#1d621c;
}
#Mozilla:visited
{
	color:#1d621c;
}
.SignIn
{
	position:relative;
	top:50px;
}
#link_cours
{
	font-size:12px;
	text-decoration:none;
}
.validation_box
{
	font-size:10px;
	position:relative;
	left:220px;
	top:100px;
	border:1px solid black;
	width:320px;
	text-indent:15px;
	background-image:url('connexion_background.jpg');
}
caption /* Titre du tableau */
{
   margin: auto; /* Centre le titre du tableau */
   font-family: Arial, Times, "Times New Roman", serif;
   font-size: 14px;
   color: #009900;
   margin-bottom: 20px; /* Pour éviter que le titre ne soit trop collé au tableau en-dessous */
}

table /* Le tableau en lui-même */
{
   border: 1px outset green; /* Bordure du tableau avec effet 3D (outset) */
   border-collapse: collapse; /* Colle les bordures entre elles */
   position:relative;
   left:80px;
}

th /* Les cellules d'en-tête */
{
   background-color: #006600;
   color: white;
   font-size: 10px;
   font-family: Arial, "Arial Black", Times, "Times New Roman", serif;
}

td /* Les cellules normales */
{
   border: 1px solid black;
   font-family: "Comic Sans MS", "Trebuchet MS", Times, "Times New Roman", serif;
   text-align: center; /* Tous les textes des cellules seront centrés*/
   padding: 5px; /* Petite marge intérieure aux cellules pour éviter que le texte touche les bordures */
   font-size:10px;
}
.consulter
{
	font-size:12px;
	text-align:center;
	text-decoration:none;
	color:white;
}
.consulter_menu
{
	height:30px;
	background-color:#76a5ca;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_sciences
{
	height:30px;
	background-color:#41a569;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_lettres
{
	height:30px;
	background-color:#eae8d6;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_lettres_type
{
	height:30px;
	background-color:#e2be72;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_sciences_type
{
	height:30px;
	background-color:#ff8c55;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_langues_plus
{
	height:30px;
	background-color:#72e274;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_langues_plus_type
{
	height:30px;
	background-color:#e4655c;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_langues
{
	height:30px;
	background-color:#f26262;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_options
{
	height:30px;
	background-color:#4651ec;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.consulter_menu_options_type
{
	height:30px;
	background-color: #6aa6ea;
	text-decoration:none;
	color:white;
	font-size:10px;
	-moz-border-radius: 10px;
	border:0.5px #5cb5e4 solid ;
	margin-top:1px;
}
.cours
{
	background-color:#f26262
}
a
{
	text-decoration:none;
	color:black;
}
a:hover
{
	background-image:url('connexion_background.jpg');
}
a:visited
{
	text-decoration:none;
	color:black;
}

Golmote

28 décembre 2009 à 17:15:23

Alors en fait, le problème bien du fait que les boutons sont dans un <table>.

Et ton CSS modifie les table, tr et td.

Il faudrait que tu mettes une classe à tes tableaux et que tu restreignes le style à cette classe, pour ne pas que l'éditeur soit affecté.

Dokéco

28 décembre 2009 à 17:30:40

Merci ! J'ai appris beaucoup de choses aujourd'hui =)
Je te suis très reconnaissant d'avoir pris du temps pour chercher

Passe une bonne fin de journée !

Cordialement, Ewen.