Texte en gras javascript
Résolu
niko16
Messages postés
65
Statut
Membre
-
niko16 Messages postés 65 Statut Membre -
niko16 Messages postés 65 Statut Membre -
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
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
- Texte en gras - 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
- Mettre un texte en majuscule - Guide
4 réponses
Ceci peut-il apporter un début de réponse ?
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function grasser(texte1)
{document.getElementById(texte1).style.fontWeight="bold"}
//-->
</script>
<style type="text/css">
<!--
.Style4 {
font-size: 60px;
color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
}
.Style5 {font-size: 12px}
-->
</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>
???
<html>
<head>
<script language="JavaScript" type="text/JavaScript">
<!--
function grasser(texte1)
{document.getElementById(texte1).style.fontWeight="bold"}
//-->
</script>
<style type="text/css">
<!--
.Style4 {
font-size: 60px;
color: #FF0000;
font-family: Arial, Helvetica, sans-serif;
}
.Style5 {font-size: 12px}
-->
</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>
???
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...
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...
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
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
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
Alors que dans un textarea <b>blablablabla</b> s'afficherait tel quel, donc au mieux tu ne pourrais changer que le style d'ensemble
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">
<!--
function boldSelection(){
if(document.selection){
oTextRange = document.selection.createRange()
oTextRange.expand("word") // character, word, sentence, textedit
oTextRange.execCommand("bold") // BackColor
}
else{
alert("IE seulement")
}
}
//-->
</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 !
http://www.huntingground.freeserve.co.uk/main/mainfram.htm?../scripts/selection1.htm
----------------------------------------------------------------------------------------------------------------------------
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
function boldSelection(){
if(document.selection){
oTextRange = document.selection.createRange()
oTextRange.expand("word") // character, word, sentence, textedit
oTextRange.execCommand("bold") // BackColor
}
else{
alert("IE seulement")
}
}
//-->
</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 !
<html>
<head>
</head>
<body>
<script type="text/javascript">
<!--
function boldSelection(){
if(document.selection){
oTextRange = document.selection.createRange()
oTextRange.expand("word") // character, word, sentence, textedit
oTextRange.execCommand("bold") // BackColor
}
else{
alert("IE seulement")
}
}
//-->
</script>
<P>Tape ton texte ci-dessous, puis clique sur le bouton Recopie
<script language=javascript>
<!--
moz=document.getElementById&&!document.all
function format_txt(str){
output = "";
for (var i = 0; i < str.length; i++) {
if(!moz){
if (str.charCodeAt(i) == 13 && str.charCodeAt(i + 1) == 10){output += "<BR>"}
else{output += str.charAt(i)}
}
if(moz){
if (str.charCodeAt(i) == 10){output += "<BR>"}
else{output += str.charAt(i)}
}
}
document.getElementById("div1").innerHTML=output
}
//-->
</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>
<head>
</head>
<body>
<script type="text/javascript">
<!--
function boldSelection(){
if(document.selection){
oTextRange = document.selection.createRange()
oTextRange.expand("word") // character, word, sentence, textedit
oTextRange.execCommand("bold") // BackColor
}
else{
alert("IE seulement")
}
}
//-->
</script>
<P>Tape ton texte ci-dessous, puis clique sur le bouton Recopie
<script language=javascript>
<!--
moz=document.getElementById&&!document.all
function format_txt(str){
output = "";
for (var i = 0; i < str.length; i++) {
if(!moz){
if (str.charCodeAt(i) == 13 && str.charCodeAt(i + 1) == 10){output += "<BR>"}
else{output += str.charAt(i)}
}
if(moz){
if (str.charCodeAt(i) == 10){output += "<BR>"}
else{output += str.charAt(i)}
}
}
document.getElementById("div1").innerHTML=output
}
//-->
</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>
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
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
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
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
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?
Merci motus