Texte en gras javascript

Résolu/Fermé

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

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. Il y aurait donc juste le fait que ca m'envoi le texte avec la mise en forme correcte sur un nouvelle page...Je n'y comprends plus rien je vous mets le code associé au javascript et au textarea 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>
.....
<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>
....

Svp aidez moi je sens que je ne suis plus très loin et le temps m'est compté

Merci d'avance

A voir également:

Texte en gras javascript
Ecrire en gras sur whatsapp - Guide
Texte de chanson gratuit pdf - Télécharger - Vie quotidienne
Transcription audio en texte word gratuit - Guide
Excel cellule couleur si condition texte - Guide
Telecharger javascript - Télécharger - Langages

4 réponses

Réponse 1 / 4

Hubert
4 juin 2008 à 17:07

Ceci peut-il apporter un début de réponse ?

<html>
<head>
<script language="JavaScript" type="text/JavaScript">

</script>
<style type="text/css">

</style>
</head>
<body >
<p><span class="Style5" onClick="grasser('texte1')" ><u>cliquer ici pour avoir en gras</u></span>
</p>
<p class="Style4" id="texte1">texte à mettre en gras</p>
</body>
</html>

???

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

salut hubert,

Merci de m'avoir répondu.
Oui c'est quelque chose comme ca que je veux faire. Mais la tu passe par l'id hors moi je récupère le texte sélectionné dans une variable. Ce que tu as fais ca mets en gras toute la balise span et non simplement un texte séléctionné... Aurais tu une idée pour faire la même chose avec une variable et non avec un id?? J'y connais rien en javascript malheureusement. Au lieu d'utiliser "document.getElementById" on ne pourrait pas utilisé quelque chose d'équivalent mais avec une variable genre "document.getElementByVariable" lol jsé pas....

Je passe par une variable pour enregistré le texte séléctionné mais si tu as une autre idée jsuis preneur...

Merci encore de m'avoir répondu

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

salut hubert,

Merci de m'avoir répondu.
Oui c'est quelque chose comme ca que je veux faire. Mais la tu passe par l'id d'un span hors moi je récupère le texte sélectionné dans une variable. Ce que tu as fais ca mets en gras toute la balise span et non simplement un texte séléctionné...mais c'était pas bete ^^
Aurais tu une idée pour faire la même chose avec une variable et non avec un id?? J'y connais rien en javascript malheureusement. Au lieu d'utiliser "document.getElementById" on ne pourrait pas utilisé quelque chose d'équivalent genre "document.getElementByVariable" lol

Je passe par une variable pour enregistré le texte séléctionné mais si tu as une autre idée jsuis preneur...

Merci encore de m'avoir répondu

motus > niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011
5 juin 2008 à 11:14

A mon avis tu vas devoir prendre tout le texte du innerHtml et à l'intérieur faire un replace('texteAMettreEnGras', '<b>texteAMettreEnGras</b>') -> je ne connais pas la fonction exacte, c'est pour te donner le principe...

Par contre, si ton texte est plusieurs fois dans le texte il sera mis en gras partout, mais c'est peut-être ce que tu veux faire?

niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011 2 > motus
5 juin 2008 à 13:37

Je veux simplement faire comme sous Word. L'utilisateur tape un texte, il séléctionne une partie, appuie sur le bouton de mise en gras et vois son texte en gras. Je vais voir du coté de la fonction replace

Merci motus

Réponse 2 / 4

motus
4 juin 2008 à 13:54

Salut,

Déjà le document.write(texte.bold()); c'est normal qu'il affiche une nouvelle page, car en fait si tu fais de cette façon il écrase le code de la page actuelle! Et en passant par doc.style.textDecoration tu modifies le style du textarea, donc c'est normal aussi que le style choisi s'applique partout...

A mon avis, ça va être + compliqué que tu ne le penses, il faudrait sans doute plutôt utiliser un div et regarder du côté de la propriété innerHtml. Le texte se trouve dans ce innerHtml et comme son nom l'indique tu peux y mettre du html, donc par exemple remplacé un texte sélectionné par <b>texte</b> ou <i>texte</i>, etc...

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

Salut motus,

Merci pour ta réponse.J'avais dans l'idée de stocké le texte dans une variable et l'écraser avec un texte en gras... En gros c'est ce que je voulais faire ce n'est pas possible???

Je vais essayé de regarder du coté de la propriété innerHTML mais si j'ai bien compris l'utilsateur lors de la saisie verrais quelque chose du style: <b>blablablabal</b> à l'écran? Ce n'est pas possible qu'il voit le texte en gras directement sans les balises?

Merci encore
Cordialement

motus > niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011
4 juin 2008 à 14:23

Non non l'utilisateur verra le texte en gras dans le innerHtml et justement toi par contre tu pourras remplacer blablablabla par <b>blablablabla</b> pour qu'il apparaisse ainsi. Avec le innerHtml tu pourras donc faire le remplacement comme tu le voulais.

Alors que dans un textarea <b>blablablabla</b> s'afficherait tel quel, donc au mieux tu ne pourrais changer que le style d'ensemble

niko16 Messages postés 65 Date d'inscription mardi 3 juin 2008 Statut Membre Dernière intervention 14 septembre 2011 2 > motus
4 juin 2008 à 15:31

ok meci motus j'essairais ca demain la jvais débauché...et oui la chance ^^

merci beaucoup pour ton aide

Réponse 3 / 4

Hubert
5 juin 2008 à 17:08

Merci à huntingground parce que sans lui je n'y arrivais pas

http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/selection1.htm

----------------------------------------------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<script type="text/javascript">

</script>
<P>Arrivés aux Tuileries, Maillard voulait suivre le quai, les femmes<br>
voulaient passer triomphalement sous l'horloge, par le palais et le<br>
jardin. Maillard, observateur des formes, leur dit de bien remarquer que<br>
c'était la maison du roi, le jardin du roi; les traverser sans<br>
permission, c'était insulter le roi. Il s'approcha poliment du suisse,<br>
et lui dit que ces dames voulaient passer seulement, sans faire le<br>
moindre dégât. Le suisse tira l'épée, courut sur Maillard, qui tira la<br>
sienne... Une portière heureusement frappe à propos d'un bâton, le<br>
suisse tombe, un homme lui met la baïonnette à la poitrine. Maillard<br>
l'arrête, désarme froidement les deux hommes, emporte la baïonnette et<br>
les épées.(Michelet)
<P>Sélectionne une partie du texte puis clique <a href="#null" onclick= "boldSelection()"><b>Mettre la sélection en gras</b></a>
</body>
</html>

Eh ouais !

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

Merci beaucoup Hubert!!!!!
C'est exactement ce que je veux faire mais ca ne marche pas dans un textarea :(
ton deuxième script non plus...je suis dégouté

Je comprends pas pourquoi ca ne fonctionne pas!!!

Réponse 4 / 4

Hubert
5 juin 2008 à 18:25

<html>
<head>
</head>
<body>
<script type="text/javascript">

</script>
<P>Tape ton texte ci-dessous, puis clique sur le bouton Recopie
<script language=javascript>

</script>
<form name="f1">
<textarea name="content" rows=10 cols=40>
</textarea>
<input type="button" value="Recopie" onclick="format_txt(this.form.content.value)">
</form>
<div id="div1"> </div>
<P>Sélectionne une partie du texte puis clique <a href="#null" onclick= "boldSelection()"><b>Mettre la sélection en gras</b></a>
</body>
</html>

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:01

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;
}

Merci a vous tous de m'avoir aidé car sans vous je n'aurais toujours pas réussi
Merci encore

Discussions similaires

Trouver le mot réellement écrit en lettres capitales PIX

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

adele

Javascript Arrondi à 2 chiffres après la virgule