Prévisualisation en direct d'une page PHP

12 juin 2012, 09:06

Donc il y a bien une erreur Javascript contrairement à ce que tu m'as dit.

Regardes la fenêtre d'erreur de ton navigateur.

12 juin 2012, 10:51

C'est à dire ?

Voici ce que j'ai relevé :

Mais cela a-t-il quelque chose à voir avec mon problème ? :/

Lorsque j'ouvre à part la page formAdd j'ai cette erreur qui apparait :

12 juin 2012, 11:15

Donc déjà on répond à une question, les scripts JS sont bien chargés.
Pour qu'on puisse tester et y voir plus clair, pourrais-tu nous copier/coller le code source résultant de ta page ?

12 juin 2012, 11:18

Désolé... formAdd.php ? Ou bien le code que me fourni l'éditeur de texte ?

12 juin 2012, 13:08

Directement le code source généré par le navigateur (clic droit > afficher la source), cela nous évitera la compatibilité du code PHP qui de plus n'est pas concerné par ton problème.

12 juin 2012, 15:53

Le voici :

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
	"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">

<head>
	<title>.:: Intranet CSM ::.</title>
	<link href="style.css" rel="stylesheet" type="text/css">
	<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<SCRIPT LANGUAGE="Javascript" SRC="fonctions.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="fonctionsChat.js"></SCRIPT>
<SCRIPT LANGUAGE="Javascript" SRC="jscode_calendrier.js"></SCRIPT>
<script language="JavaScript" type="text/javascript" src="lib/prototype.js"></script>
<script language="JavaScript" type="text/javascript" src="src/scriptaculous.js"></script>



<div id='popup'>gfdgd</div>
<body id='body0' onload="init()"  onKeyDown="touchepress(event)">


<div id="communication"></div>
<div id="chatBox" style='display:none'></div>
<div id='emulBody'>
	<div id='page'>
		<input type='hidden' id='path' />
		<div id='divRequete' style='display:none'></div>
		<div id='popupAlert'></div>
		<div id='cadreLoading'>Chargement des donn&eacute;es<br><img src="imgs/loading.gif" /></div>
		<div id='banniere'>
			<img src="imgs/logo.jpg"  onclick="linkToDiv('actualite/accueil.php','rubrique','','1');" style="cursor:pointer;float:left;" />
<div id="login">
	<div style='float:right;text-align:right'><img style='float:right;border:1px solid #FFF;margin-left:10px;' src='profil/photos/11980_ico.jpg' height='45' />Utilisateur : <strong>Maxime TCHOUANMOU</strong><p style='margin-top:5px;'><input type='button' value='Deconnexion' onClick='goConnexion(0)'  style='font-size:9px;' /></p><div class='spacer'></div></div></div>

		</div>
		<div id='menu'>
			<ul class='listMenu'><li onMouseOver=overMenu(100); onMouseOut=outMenu('100',''); id='btn100' class='' onclick=linkToDiv('actualite/accueil.php','rubrique','','1');; >Actualit&eacute;s CSM</li><li onMouseOver=overMenu(101); onMouseOut=outMenu('101',''); id='btn101' class='' onclick=linkToDiv('mail/accueil.php','rubrique','','1');; >Mails CSM</li><li onMouseOver=overMenu(102); onMouseOut=outMenu('102',''); id='btn102' class='' onclick=linkToDiv('repas/accueil.php','rubrique','','1');; >Repas CSM</li><li onMouseOver=overMenu(103); onMouseOut=outMenu('103',''); id='btn103' class='' onclick=linkToDiv('pharma/accueil.php','rubrique','','1');; >Pharma CSM</li><li onMouseOver=overMenu(104); onMouseOut=outMenu('104',''); id='btn104' class='' onclick=addTabLink('salle/calendrier.php','contenu','','1');linkToDiv('salle/accueil.php','rubrique','','1');; >Planning salles</li><li onMouseOver=overMenu(105); onMouseOut=outMenu('105',''); id='btn105' class='' onclick=addTabLink('fichesPatients/ambulatoire.php','affFiche','','1');linkToDiv('fichesPatients/accueil.php','rubrique','','1');; >Evaluations patients</li><li onMouseOver=overMenu(106); onMouseOut=outMenu('106',''); id='btn106' class='' onclick=linkToDiv('LingeCSM/accueil.php','rubrique','','1');; >Lingerie CSM</li><li onMouseOver=overMenu(107); onMouseOut=outMenu('107',''); id='btn107' class='' onclick=linkToDiv('LingeSAMSIC/accueil.php','rubrique','','1');; >Lingerie SAMSIC</li><li onMouseOver=overMenu(108); onMouseOut=outMenu('108',''); id='btn108' class='' onclick=linkToDiv('forum/accueil.php','rubrique','','1');; >Forum</li></ul>		</div>
		<div id='corps'>
        	<marquee scrollamount="5">
				<font size='3'><b>*** Nous rappelons que les ordinateurs doivent être éteints tous les soirs (sauf URGENCES, Salles de Soins et BLOCS) - Pour Le Développement Durable ***</b></font> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 			</marquee>
			<div id='cadrePlus'></div><div id='rubrique'></div>			<div class='spacer' ></div>
		</div>
		<div style='float:left;padding:2px;color:#FFFFFF;'>Votre adresse ip : <strong><?php=$_SERVER["REMOTE_ADDR"]; ?></strong></div>
		<div id='basPage'>
			Intranet CSM &copy; - V 3.1 - MAJ : 16/06/10
			
		</div>
	</div>
</div>
<br>
</body>
</html>

Mais la page concernée n'apparait pas ici. Alors la voici, toujours sous navigateur mais à part :

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
<script src="../xing/parser_rules/advanced.js"></script>
<script src="../xing/dist/wysihtml5-0.3.0.min.js"></script>
<script>
var editor = new wysihtml5.Editor('wysihtml5-textarea', { // id of textarea element
  toolbar:      'wysihtml5-toolbar', // id of toolbar element
  parserRules:  wysihtml5ParserRules // defined in parser rules set 
});
alert(editor);
</script>
</head>
<body>

<h1><br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined offset: 0 in C:\wamp\www\GestionCSM\actualite\formAdd.php on line <i>20</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0116</td><td bgcolor='#eeeeec' align='right'>684080</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp\www\GestionCSM\actualite\formAdd.php' bgcolor='#eeeeec'>..\formAdd.php<b>:</b>0</td></tr>
</table></font>
Publication d'une actualit&eacute;</h1><div id='contenu'><br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: titre in C:\wamp\www\GestionCSM\actualite\formAdd.php on line <i>32</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0116</td><td bgcolor='#eeeeec' align='right'>684080</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp\www\GestionCSM\actualite\formAdd.php' bgcolor='#eeeeec'>..\formAdd.php<b>:</b>0</td></tr>
</table></font>
<p>Titre <input type='text' size='60' id='titreActu' value="" /></p><p><input type='button' onClick="miseEnForme('<h2>','</h2>','<?php=$idDivToMod; ?>')" value='Titre2' />
<input type='button' onClick="miseEnForme('<u>','</u>','<?php=$idDivToMod; ?>')" value='Souligner' />
<input type='button' onClick="miseEnForme('<strong>','</strong>','<?php=$idDivToMod; ?>')" value='Gras' />
<input type='button' onClick="miseEnForme('<i>','</i>','<?php=$idDivToMod; ?>')" value='Italique' />
<input type='button' onClick="miseEnForme('<center>','</center>','<?php=$idDivToMod; ?>')" value='Centrer' />
<input type='button' onClick="miseEnFormeLien('<?php=$idDivToMod; ?>')" value='Lien' />
<input type='button' onClick="addFormImg('<?php=$idDivToMod; ?>')" value='Image' /></p><p><br />
<font size='1'><table class='xdebug-error' dir='ltr' border='1' cellspacing='0' cellpadding='1'>
<tr><th align='left' bgcolor='#f57900' colspan="5"><span style='background-color: #cc0000; color: #fce94f; font-size: x-large;'>( ! )</span> Notice: Undefined variable: texte in C:\wamp\www\GestionCSM\actualite\formAdd.php on line <i>38</i></th></tr>
<tr><th align='left' bgcolor='#e9b96e' colspan='5'>Call Stack</th></tr>
<tr><th align='center' bgcolor='#eeeeec'>#</th><th align='left' bgcolor='#eeeeec'>Time</th><th align='left' bgcolor='#eeeeec'>Memory</th><th align='left' bgcolor='#eeeeec'>Function</th><th align='left' bgcolor='#eeeeec'>Location</th></tr>
<tr><td bgcolor='#eeeeec' align='center'>1</td><td bgcolor='#eeeeec' align='center'>0.0116</td><td bgcolor='#eeeeec' align='right'>684080</td><td bgcolor='#eeeeec'>{main}(  )</td><td title='C:\wamp\www\GestionCSM\actualite\formAdd.php' bgcolor='#eeeeec'>..\formAdd.php<b>:</b>0</td></tr>
</table></font>
<textarea rows='16' id='textActu' name='textActu' style='width:100%'></textarea><div id='wysihtml5-toolbar' style='display: none;'>
		  <a data-wysihtml5-command='bold'>bold</a>
		  <a data-wysihtml5-command='italic'>italic</a>
		  
		  <!-- Some wysihtml5 commands require extra parameters -->
		  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red'>red</a>
		  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green'>green</a>
		  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue'>blue</a>
		  
		  <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
		  <a data-wysihtml5-command='createLink'>insert link</a>
		  <div data-wysihtml5-dialog='createLink' style='display: none;'>
			<label>
			  Link:
			  <input data-wysihtml5-dialog-field='href' value='http://' class='text'>
			</label>
			<a data-wysihtml5-dialog-action='save'>OK</a> <a data-wysihtml5-dialog-action='cancel'>Cancel</a>
		  </div>
		</div><form><textarea id='wysihtml5-textarea' placeholder='Enter your text ...' autofocus></textarea></form></p></div><div class='cadreEntete'><input type='button' value='Publier' onClick=goValidAddActu(); /> <input type='button' value='Annuler' onClick=hideDiv('popup'); /></div>

</body>
</html>

12 juin 2012, 17:13

Bon alors en fait j'ai trouvé ce qui n'est ps expliqué dans la doc...
Le script doit être appelé uniquement après le chargement complet de la page ou au moins du textarea.
Donc soit il faut jouer avec l'évènement onload.
Soit il faut placer la balise script après le textarea.

13 juin 2012, 13:42

J'ai essayé de déplacer la balise script sous la textarea, sans résultat non plus :/

13 juin 2012, 14:21

Montres nous le code actualisé. Car moi j'ai parfaitement réussi à le faire fonctionner.
Penses à vider le cache de ton navigateur aussi quand tu testes.

13 juin 2012, 16:49

J'ai vidé le cache, toujours aucun résultat.
Voici le code actualisé :

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>

<?php include('../init.php');

echo "<h1>";
	$idActu=$tabVariables[0];
	if($idActu==""){
		echo "Publication d'une actualit&eacute;";
	}else{
		echo "Modification de l'actualit&eacute; $idActu";
		$req=verifReq("SELECT * FROM actualite WHERE idActu='$idActu'");
		$titre=mysql_result($req,0,'titre');
		$texte=mysql_result($req,0,'texte');
		$texte=str_replace("<br />","",$texte);
	}
echo "</h1>";
echo "<div id='contenu'>";
	echo "<p>Titre <input type='text' size='60' id='titreActu' value=\"$titre\" /></p>";
	echo "<p>";
			$idDivToMod='textActu';
			include('../miseEnForme.php');
	echo "</p>";
	echo "<p>";
		echo "<textarea rows='16' id='textActu' name='textActu' style='width:100%'>$texte</textarea>";
		
		//Barre d'outil pour wysiwyg
		echo "<div id='wysihtml5-toolbar' style='display: none;'>
		  <a data-wysihtml5-command='bold'>bold</a>
		  <a data-wysihtml5-command='italic'>italic</a>
		  
		  <!-- Some wysihtml5 commands require extra parameters -->
		  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red'>red</a>
		  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green'>green</a>
		  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue'>blue</a>
		  
		  <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
		  <a data-wysihtml5-command='createLink'>insert link</a>
		  <div data-wysihtml5-dialog='createLink' style='display: none;'>
			<label>
			  Link:
			  <input data-wysihtml5-dialog-field='href' value='http://' class='text'>
			</label>
			<a data-wysihtml5-dialog-action='save'>OK</a> <a data-wysihtml5-dialog-action='cancel'>Cancel</a>
		  </div>
		</div>";
		//textarea pour wysiwyg
		echo "<form><textarea id='wysihtml5-textarea' placeholder='Enter your text ...' autofocus></textarea></form>";
		echo "<script src='../xing/parser_rules/advanced.js'></script>
<script src='../xing/dist/wysihtml5-0.3.0.min.js'></script>
<script>
var editor = new wysihtml5.Editor('wysihtml5-textarea', { // id of textarea element
  toolbar:      'wysihtml5-toolbar', // id of toolbar element
  parserRules:  wysihtml5ParserRules // defined in parser rules set 
});
alert(editor);
</script>";
	echo "</p>";
echo "</div>";
	echo "<div class='cadreEntete'>";
		if($idActu==""){
			echo "<input type='button' value='Publier' onClick=goValidAddActu(); /> ";
		}else{
			echo "<input type='button' value='Modifier' onClick=goValidModActu('$idActu'); /> ";			
		}
		echo "<input type='button' value='Annuler' onClick=hideDiv('popup'); />";
	echo "</div>";
?>


</body>
</html>

13 juin 2012, 20:11

Il fonctionne très bien.
A noter que pour pouvoir utiliser les couleurs il faut créer ta propre feuille de style, ou bien importer celle de l'exemple.
Mais sinon le gras et l'italique fonctionne du tonnerre.

Voici mon code fonctionnel, je n'ai fait que rajouter le CSS manquant pour les couleurs et changé les chemins des fichiers JS :

<html xmlns="http://www.w3.org/1999/xhtml" lang="fr" xml:lang="fr">
<head>
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf-8" />
</head>
<body>

<?php //include('../init.php');

echo "<h1>";
        $idActu=$tabVariables[0];
        if($idActu==""){
                echo "Publication d'une actualit&eacute;";
        }else{
                echo "Modification de l'actualit&eacute; $idActu";
                //$req=verifReq("SELECT * FROM actualite WHERE idActu='$idActu'");
                $titre=mysql_result($req,0,'titre');
                $texte=mysql_result($req,0,'texte');
                $texte=str_replace("<br />","",$texte);
        }
echo "</h1>";
echo "<div id='contenu'>";
        echo "<p>Titre <input type='text' size='60' id='titreActu' value=\"$titre\" /></p>";
        echo "<p>";
                        $idDivToMod='textActu';
                        //include('../miseEnForme.php');
        echo "</p>";
        echo "<p>";
                echo "<textarea rows='16' id='textActu' name='textActu' style='width:100%'>$texte</textarea>";
               
                //Barre d'outil pour wysiwyg
                echo "<div id='wysihtml5-toolbar' style='display: none;'>
                  <a data-wysihtml5-command='bold'>bold</a>
                  <a data-wysihtml5-command='italic'>italic</a>
                 
                  <!-- Some wysihtml5 commands require extra parameters -->
                  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='red'>red</a>
                  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='green'>green</a>
                  <a data-wysihtml5-command='foreColor' data-wysihtml5-command-value='blue'>blue</a>
                 
                  <!-- Some wysihtml5 commands like 'createLink' require extra paramaters specified by the user (eg. href) -->
                  <a data-wysihtml5-command='createLink'>insert link</a>
                  <div data-wysihtml5-dialog='createLink' style='display: none;'>
                        <label>
                          Link:
                          <input data-wysihtml5-dialog-field='href' value='http://' class='text'>
                        </label>
                        <a data-wysihtml5-dialog-action='save'>OK</a> <a data-wysihtml5-dialog-action='cancel'>Cancel</a>
                  </div>
                </div>";
                //textarea pour wysiwyg
                echo "<form><textarea id='wysihtml5-textarea' placeholder='Enter your text ...' autofocus></textarea></form>";
                echo "<script src='xing/parser_rules/advanced.js'></script>
<script src='xing/dist/wysihtml5-0.3.0.min.js'></script>
<script>
var editor = new wysihtml5.Editor('wysihtml5-textarea', { // id of textarea element
  toolbar:      'wysihtml5-toolbar', // id of toolbar element
  parserRules:  wysihtml5ParserRules, // defined in parser rules set
  stylesheets: [\"xing/website/css/editor.css\"]
});
</script>";
        echo "</p>";
echo "</div>";
        echo "<div class='cadreEntete'>";
                if($idActu==""){
                        echo "<input type='button' value='Publier' onClick=goValidAddActu(); /> ";
                }else{
                        echo "<input type='button' value='Modifier' onClick=goValidModActu('$idActu'); /> ";                   
                }
                echo "<input type='button' value='Annuler' onClick=hideDiv('popup'); />";
        echo "</div>";
?>


</body>
</html>

14 juin 2012, 11:23

Bon... Toujours aucun résultat chez moi, même après avoir modifier le chemin pour les scripts.
Je te remercie pour ton aide. Je trouverai une solution alternative au vu de mon incapacité à appliquer tes conseils :/

Prévisualisation en direct d'une page PHP

Qui est en ligne