Pb modification forme du texte [ Javascript ]

Résolu/Fermé

niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011 - 3 juin 2008 à 15:54
niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011 - 6 juin 2008 à 12:10

Bonjour,
Je suis étudiant en BTS informatique de gestion donc mes connaissances sont assez limités. Je suis actuellement en stage et j'ai pour projet de créer un site intranet avec gestion d'ajout de rubriques.
Afin de personnaliser ces dernières, j'ai dans l'idée d'inclure une gestion de mise en forme du texte pour améliorer l'esthétique des rubriques.
J'ai réussi a enregistrer le texte sélectionné dans la variable "texte" mais quand je clique sur le bouton gras ou italic ca m'envoi sur un page blanche avec le bon texte avec la bonne mise en forme.Dans les cas de centrage et de soulignement j'ai essayé une autre facon mais ca saplique a tout le textarea...Je n'y comprends plus rien je vous mets le code ci dessous :

code :

<?php
session_start();

include ("connect.php");
?>
<html>

<head>

<title>Ajout d'une rubrique</title>

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />

<link rel="stylesheet" type="text/css" href="styles/design.css"/>

<script type="text/javascript">

function mise_en_forme(form, choix)
{
if (document.selection)
{

var texte = document.selection.createRange().text;
var style = choix //Récupère le choix de l'utilisateur (gras italic...)
var doc = document.form.textarea;

switch (style)
{
case "b" : {document.write(texte.bold()); break}
case "u" : {doc.style.textDecoration = "underline"; break}
case "i" : {document.write(texte.italics()); break}
case "center" : {doc.style.textAlign= "center"; break}
default:

break;
}
}
else
{
alert( "Aucun texte n'a été sélectionné" );
}
}

</script>

</head>

<body>

<table>
<tr>
<img src="img/baniere.bmp" align="left"/>
</tr>
<tr>
<td valign="top">
<?php
// Affichage du menu
include("menu.htm");
?>
</td>

<td valign="top" width="600">

<?php

if(isset($_SESSION['pseudo']))
{

?>

<center>

<table class="titre">
<tr>
<br/><br/><br/><br/>
<td>
<center>
<br><h2><u>Ajout d'une rubrique</u></h2>
</center>
</td>
</tr>
</table>

</center>

<br/><br/><br/><br/><br/><br/><br/>

<form action="#" method="post" name="form">

<center>

<table bgcolor="#e0e0e0" width="500" id="style_rubrique">
<tr>
</tr>

<tr>
<td id="entete_rubrique">
<img src="img/ecrire_rubrique.png" align="left" id="image_rubrique"/><br/>Création d'une nouvelle rubrique
</td>
</tr>

<tr>
<td class="titre_rubrique"><br/><br/><br/><br/>Titre de votre rubrique : <br/>
<input type="text" name="titre_rubrique" size="70" class="case"/>
</td>
</tr>

<br/>

<tr>
<td class="titre_rubrique"><br/><br/><br/>Votre texte :<br/>
<textarea rows="20" cols="60" name="textarea" id="area" onfocus="if ( !this.cliquer )
{ this.value=''; this.cliquer=true; }"/> Tapez le contenu de votre rubrique ici...
</textarea>

<input type="button" name="bouton" value="Gras" onClick="mise_en_forme(form, 'b')">
<input type="button" name="bouton" value="Souligné" onClick="mise_en_forme(form, 'u' )">
<input type="button" name="bouton" value="Italique" onClick="mise_en_forme(form, 'i' )">
<input type="button" name="bouton" value="Centrer" onClick="mise_en_forme(form, 'center' )">

</td>
</tr>

<tr>
<td>
<br/><br/><input type="submit" value="Proposer la rubrique" name="rubrique" class="submit"/>
</td>

</tr>

<?php

// Récupération de la date (jours et heures)

$jours = date('d/m/Y');
$heures = date('H:i');

if(isset($_POST['rubrique']))
{
if(($_POST['titre_rubrique'] != NULL) && ($_POST['texte_rubrique'] != NULL))
{
extract($_POST);

$texte = $_POST['texte_rubrique'];
// Envoi des données dans la base

$envoi = "INSERT INTO rubriques valueS ('', '".$_SESSION['pseudo']."', '" .$_POST['titre_rubrique']. "', '".mysql_real_escape_string($texte)."', '$jours', '$heures')";
$rep_envoi = mysql_query($envoi);

?>

<img src='img/valid_rubrique.bmp' align='left'/>

<br/>

<div id="rubrique_ok">
<b> Votre rubrique vient d'être envoyée </b>

<br/><br/>

<center>
Vous pouvez à présent ajouter une nouvelle rubrique ou retourner a l'accueil en cliquant ci-dessous
</center>
</div>

<br/><br/>

<div align='center'>[ <a href='index.php'><font color='#FF8C00'>Retour à l'accueil </font></a> ]

<br/><br/><br/><br/><br/>

<?php

mysql_close();
}
else // Si aucun champ rempli
{
echo "<img src='img/interdit.bmp'/><font face='arial' size='2' color='red'><b>Des champs sont manquants</b>, ";
echo "veuillez tous les remplirs</font><br/><br/>";
}
}

?>

</form>

</center>

</table>
<?php

}
else
{
?>

<table class="titre">
<tr>
<br/><br/><br/>
<td>
<center>
<br><h2><u>Accès non autorisé</u></h2>
</center>
</td>
</tr>
</table>

<br/><br/><br/><br/><br/><br/>

<center>
<img src="img/zone_interdite.bmp" align="left"/>
</center>

<br/><br/><br/>

<font color="red" face="arial">
<h4>Cette zone vous est interdite car vous n'êtes pas connecté ou vous ne possédez pas de compte !</h4>
</font>

<br/>

<font color="#696969" face="arial">
<h5>Cliquez <a href="connexion.php" class="lien_rubrique_interdit">ici</a> pour vous connecter ou <a href="inscription.php" class="lien_rubrique_interdit">là</a> pour vous inscrire</h5>
</font>

<?php
}
?>

</td>

<td valign="top">
<?php
// Affichage du calendrier
include("calendrier.php");
?>
</td>
</tr>

</table>

</body>

</html>

Je sens que je ne suis pas loin.J'espère que vous saurez répondre a mon problème afin de m'éclaircir un peu...
Merci d'avance

A voir également:

Pb modification forme du texte [ Javascript ]
Mise en forme conditionnelle excel - Guide
Suivi de modification word - Guide
Logiciel modification pdf gratuit - Guide
Telecharger javascript - Télécharger - Langages
Transcription audio en texte word gratuit - Guide

1 réponse

Réponse 1 / 1

niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011 2
3 juin 2008 à 16:52

SVP aidez moi....je ne m'y connais quasiment pas en javascript mais c'est, je pense, le moyen le plus efficace pour y arriver.
Si vous voulez des explications sur mon code dites le moi.
Une petite précision, ma page est une immense table dans que j'ai séparé en 3 cases
La première correspond a un menu, la deuxième au corps de la page et la 3 à une zone d'outils avec notament un horloge et un calendrier.

Voila si quelque chose d'autre vous gênes n'hésitez pas...
Merci

niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011 2
6 juin 2008 à 12:10

C'est bon j'ai réussi!!!
J'ai créer un paragraphe que j'ai ensuite personnalisé pour lui donner un style de textarea :p
Voici le code qui fonctionne :

// Début du script
<body>

<script type="text/javascript">

function gras()
{
if(document.selection)
{
texte = document.selection.createRange()
texte.expand("word")
texte.execCommand("bold")
}
else
{
alert("Erreur!!")
}
}

</script>

// Fin du script

<p contenteditable name="texte_rubrique" id="area">
</p>
<a href="#null" onclick= "gras()"><b>Mettre la sélection en gras</b></a>

// Contenu CSS

#area
{
font-weight: normal;
font-family: Arial;
font-size: small;
text-align: left;
border-style: solid;
border-color: #aaaaaa;
border-width: 1px;
background-color: white;
height: 200px;
overflow-y: scroll;
}

Discussions similaires

Formule Excel : "SI" une cellule contient un mot, alors ?

copie de texte

Boucle sur la première diapositive d'une présentation

avantages et inconvénients du téléphone portable