Forum |  HardWare.fr | News | Articles | PC | Prix | S'identifier | S'inscrire | Aide | Shop Recherche
1603 connectés 

  FORUM HardWare.fr
  Programmation
  PHP

  ajouter un menu de mise en forme dans un formulaire

 



 Mot :   Pseudo :  
 
Bas de page
Auteur Sujet :

ajouter un menu de mise en forme dans un formulaire

n°2234752
dante05
Posté le 01-08-2014 à 18:04:18  profilanswer
 

Salut à tous,
 
je suis en train de créer un site pour un ami qui m'a demandé à ce que chaque page puisse être éditable.
J'y suis presque arrivé mais avant de passer à la suite, je vous fait part de mon travail pour que vous l'ayez sous les yeux:
 
Mon système est basé sur un système de news sans bdd et est composé de 5 fichiers.
 
- Document .txt qui reçois les news/messages
 
- Fichier 'ajouter_news.php' qui possède le code suivant:
 

Code :
  1. <body>
  2. <form action="" method="post">
  3. <label for="contenu">Contenu de la news :</label> <br />
  4. <textarea name="contenu" id="contenu" rows="20" cols="60"></textarea><br />
  5.      <input type="submit" value="Ajouter la news" />
  6. <p>&nbsp;</p>
  7. <?php
  8. if($_POST['contenu']){
  9.         //On définit les variables
  10.         $contenu = $_POST['contenu'];
  11.      
  12. //Puis on récupère les news qui existent déjà, et on stocke le tout dans $news
  13. $news = unserialize(file_get_contents('news.txt'));
  14. //On ajoute les données de la news à la suite de l'array
  15. $news[] = array('contenu' => $contenu);
  16. //Et pour finir, on enregistre le tout
  17. file_put_contents('news.txt', serialize($news));
  18. echo 'La news a bien été ajoutée !';
  19. } else {
  20.     //Affichage du formulaire
  21. }
  22. ?>
  23. </body>


 
Ce dernier possède le formulaire en question et permet de valider le message.
 
- Fichier 'liste_news.php'
 

Code :
  1. <?php
  2. $liste_news = unserialize(file_get_contents('news.txt'));
  3. if(!empty($liste_news)) {
  4. foreach($liste_news as $id => $news) {
  5.  $news = array_map('htmlspecialchars', $news);
  6.  ?>
  7.   <p><?php echo $news['contenu'] ?></p>
  8.   <i><a href="supprimer_news.php?id=<?php echo $id ?>" onclick="return confirm('Etes-vous s&ucirc;r de vouloir supprimer cette news ?');">Supprimer</a>
  9.   &nbsp;</i>
  10.   <br /><br />
  11.  <?php
  12. }
  13. }
  14. else {
  15. echo 'Il n\'y a aucune news pour le moment<br />';
  16. }
  17. echo '<a href="ajouter_news.php">Ajouter une news</a>';
  18. ?>


 
Ce dernier recense les news et me permet de les supprimer, d'en ajouter une.
 
et un fichier 'supprimer_news.php'
 

Code :
  1. <body>
  2. <?php
  3. //Si l'id passé en paramètre dans l'url n'existe pas, c'est que le visiteur a été amenené ici par hasard
  4. if(!isset($_GET['id'])) {
  5. //Donc on redirige vers index.php
  6. header('Location: ajouter_news.php');
  7. //Puis on stoppe l'exécution du script
  8. exit();
  9. }
  10. //On récupère l'array des news
  11. $news = unserialize(file_get_contents('news.txt'));
  12. //Puis l'id passé en paramètre
  13. $id = (int) $_GET['id'];
  14. //Si la news existe
  15. if(isset($news[$id])) {
  16. //On efface l'index correspondant à l'id de la news
  17. unset($news[$id]);
  18. //Puis on sauvegarde le tout
  19. file_put_contents('news.txt', serialize($news));
  20. echo 'La news a bien &eacute;t&eacute; supprim&eacute;e !';
  21. }
  22. else {
  23. echo 'La news n\'existe pas.';
  24. }
  25. echo '<br />';
  26. echo '<a href="liste_news.php">Retour</a>';
  27. ?>


 
Tout marche comme il faut sauf qu'a ce jour je rencontre deux problèmes.
Déja le formulaire est simple, il n'a pas de menu et je voudrai au moins qu'on puisse y choisir du gras, de l'italic.
 
En suite, je rencontre un autre souci, quand j'écrit dans le formulaire, bien que ce dernier fonctionne, je constate qu'il ne prend pas en compte les retours à la ligne.
Donc je voudrai régler ca.
 
Alors si quelqu'un pouvait m'aider, ce serai simpas.
 
Merci d'avance


Message édité par dante05 le 01-08-2014 à 18:08:37
mood
Publicité
Posté le 01-08-2014 à 18:04:18  profilanswer
 

n°2234771
olivthill
Posté le 02-08-2014 à 11:19:57  profilanswer
 

Excusez-moi, je ne vois pas bien ce que vous avez en tête au sujet du "menu" pour le gras et l'italique. Est-ce que ce ne serait pas plutôt des boutons avec du javascript derrière ?
 
Pour les problèmes de retour à la ligne, la fonction PHP nl2br() est faite pour ça. Voir http://php.net/manual/fr/function.nl2br.php  
(Vous verrez que vous aurez peut-être aussi des problèmes pour les apostrophes, mais c'est un autre sujet.)

n°2234784
dante05
Posté le 02-08-2014 à 16:26:36  profilanswer
 

Alors pour le menu c'est exactement ça; pour le retour a la ligne; le souci c'est que je ne sait pas ou ajouter ce code

n°2234785
David Bori​ng
Posté le 02-08-2014 à 17:43:07  profilanswer
 

Pour ton menu, tu peux employer un plugin pour remplacer ton textarea par un éditeur.
Par exemple : http://ckeditor.com/

n°2234789
dante05
Posté le 02-08-2014 à 18:30:31  profilanswer
 

OK ça vas pas poser problème si mon ami tire profit de son site? Je pense aux droit et tout.
 Merci beaucoup

n°2234801
olivthill
Posté le 03-08-2014 à 07:51:58  profilanswer
 

David Boring a écrit :

Pour ton menu, tu peux employer un plugin pour remplacer ton textarea par un éditeur.
Par exemple : http://ckeditor.com/


Ca a l'air bien. Merci pour le lien.
 

dante05 a écrit :

OK ça vas pas poser problème si mon ami tire profit de son site? Je pense aux droit et tout.
 Merci beaucoup


Voici une solution qui marche sous Chrome et sous IE 11. Il parait que sous IE 8 et les versions précédentes, elle ne marche pas car selectionStart n'existe pas.

<html>
<head>
<script>
function mouseover(el) {
  el.className = "raised";
}
function mouseout(el) {
  el.className = "button";
}
function mousedown(el) {
  el.className = "pressed";
}
function mouseup(el) {
  el.className = "raised";
}
 
function format_sel(v) {
  var el = document.my_form.my_textarea;
  var start = el.selectionStart;
  var end = el.selectionEnd;
  // alert("s="+String(start)+", e="+String(end));
  var selectedText = el.value.substring(start, end);
  // alert(selectedText);
  var selectedWithTag = "<" + v + ">" + selectedText + "</" + v + ">" ;
  el.focus();
  el.value=el.value.substring(0, start)+selectedWithTag+el.value.substring(end);
  return;
}
</script>
 
<style type="text/css">
#toolbar {
 margin: 0;
 padding: 0;
 width: 262px;
 background: buttonface;
 border-top: 1px solid buttonhighlight;
 border-left: 1px solid buttonhighlight;
 border-bottom: 1px solid buttonshadow;
 border-right: 1px solid buttonshadow;
 text-align:left;
}
.button {
 background: buttonface;  
 border: 1px solid buttonface;
 margin: 1;  
}
.raised {  
 border-top: 1px solid buttonhighlight;
 border-left: 1px solid buttonhighlight;
 border-bottom: 1px solid buttonshadow;
 border-right: 1px solid buttonshadow;
 background: buttonface;
 margin: 1;
}
.pressed {
 border-top: 1px solid buttonshadow;
 border-left: 1px solid buttonshadow;
 border-bottom: 1px solid buttonhighlight;
 border-right: 1px solid buttonhighlight;
 background: buttonface;
 margin: 1;
}
</style>
</head>
 
<body>
<h2> Test </h2>
<form name="my_form">
 
<div id="toolbar">
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);"  
 onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_sel('b');"  
 src="bold.gif" width="16" height="16" align="middle"  
 alt="click to make your selection bold">
<img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);"  
 onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_sel('i');"  
 src="italic.gif" width="16" height="16" align="middle"  
 alt="click to make your selection italic">
<textarea cols="30" rows="6" id="text" type ="text/html" name="my_textarea"></textarea>  
</form>
</body>
</html>


Ce code affiche une text area avec un bouton pour mettre en gras et un bouton pour mettre en italique. Les fichiers images de ces boutons sont à ajouter.

n°2234803
dante05
Posté le 03-08-2014 à 14:33:29  profilanswer
 

Bonjour, merci pour le script c'est exactement ce que je cherche.
 
Alors je l'ai intégré:
 

Code :
  1. <html>
  2. <head>
  3. <meta charset="utf-8">
  4. <title>Document sans titre</title>
  5. </head>
  6. <script>
  7. function mouseover(el) {
  8.   el.className = "raised";
  9. }
  10. function mouseout(el) {
  11.   el.className = "button";
  12. }
  13. function mousedown(el) {
  14.   el.className = "pressed";
  15. }
  16. function mouseup(el) {
  17.   el.className = "raised";
  18. }
  19. function format_sel(v) {
  20.   var el = document.myform.contenu;
  21.   var start = el.selectionStart;
  22.   var end = el.selectionEnd;
  23.   // alert("s="+String(start)+", e="+String(end));  
  24.   var selectedText = el.value.substring(start, end);
  25.   // alert(selectedText);  
  26.   var selectedWithTag = "<" + v + ">" + selectedText + "</" + v + ">" ;
  27.   el.focus();
  28.   el.value=el.value.substring(0, start)+selectedWithTag+el.value.substring(end);
  29.   return;
  30. }
  31. </script>
  32. <style type="text/css">
  33. #toolbar {
  34. margin: 0;
  35. padding: 0;
  36. width: 262px;
  37. background: buttonface;
  38. border-top: 1px solid buttonhighlight;
  39. border-left: 1px solid buttonhighlight;
  40. border-bottom: 1px solid buttonshadow;
  41. border-right: 1px solid buttonshadow;
  42. text-align:left;
  43. }
  44. .button {
  45. background: buttonface; 
  46. border: 1px solid buttonface;
  47. margin: 1; 
  48. }
  49. .raised { 
  50. border-top: 1px solid buttonhighlight;
  51. border-left: 1px solid buttonhighlight;
  52. border-bottom: 1px solid buttonshadow;
  53. border-right: 1px solid buttonshadow;
  54. background: buttonface;
  55. margin: 1;
  56. }
  57. .pressed {
  58. border-top: 1px solid buttonshadow;
  59. border-left: 1px solid buttonshadow;
  60. border-bottom: 1px solid buttonhighlight;
  61. border-right: 1px solid buttonhighlight;
  62. background: buttonface;
  63. margin: 1;
  64. }
  65. </style>
  66. </head>
  67. <body>
  68. <form action="" method="post" form name='myform'>
  69. <div id="toolbar">
  70. <img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" 
  71. onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_sel('b');" 
  72. src="bold.gif" width="16" height="16" align="middle" 
  73. alt="click to make your selection bold">
  74. <img class="button" onmouseover="mouseover(this);" onmouseout="mouseout(this);" 
  75. onmousedown="mousedown(this);" onmouseup="mouseup(this);" onclick="format_sel('i');" 
  76. src="italic.gif" width="16" height="16" align="middle" 
  77. alt="click to make your selection italic">
  78. <label for="contenu">Contenu de la news :</label> <br />
  79. <textarea name="contenu" cols="60" rows="20" id="contenu">
  80. </textarea
  81. ><br />
  82.      <input type="submit" value="Ajouter la news" />
  83. <?php
  84. if($_POST['contenu']){
  85.         //On définit les variables
  86.         $contenu = $_POST['contenu'
  87.  ];
  88.      
  89. //Puis on récupère les news qui existent déjà, et on stocke le tout dans $news
  90. $news = unserialize(file_get_contents('news.txt'));
  91. //On ajoute les données de la news à la suite de l'array
  92. $news[] = array('contenu' => $contenu);
  93. //Et pour finir, on enregistre le tout
  94. file_put_contents('news.txt', serialize($news));
  95. echo 'La news a bien été ajoutée !';
  96. } else {
  97.     //Affichage du formulaire
  98. }
  99. ?>
  100. </body>
  101. </html>


 
Quand je clique sur un des boutons, ca fonctionne, parcontre quand j'envoi mon formulaire et que je consulte la page sur laquelle apparaît le contenu, seules les balises apparaissent mais le texte n'est pas modifié

n°2234809
olivthill
Posté le 03-08-2014 à 18:48:56  profilanswer
 

Content que les boutons marchent.
 
Pour la suite, il faudrait aller voir dans "news.txt" si la nouvelle a été enregistrée correctement.
Si c'est le cas, le problème viendrait de l'affichage, qui n'est pas (si j'ai bien compris) pas montrée dans le code ci-dessus.
 
Pour l'enregistrement dans "news.txt", j'aurais procédé d'une manière plus classique :  

   $fh = fopen("news.txt", "a+" );
   fwrite($fh, $contenu);
   fflush($fh);
   fclose($fh);



Aller à :
Ajouter une réponse
  FORUM HardWare.fr
  Programmation
  PHP

  ajouter un menu de mise en forme dans un formulaire

 

Sujets relatifs
Récupếrer valeur qui change dans un formulaire en JQUERY[PHP] formulaire fuyard
Ajouter des paragraphe d'un fichier word vers un autreAjouter un reset dans un compteur dynamique (fonctionnel) ?
Mise à jour de Cassandra (NoSQL)[XLM] mise en forme conditionnelle
JAVASCRIPT > problème de vérification mail (formulaire)PHP formulaire de contact
Plus de sujets relatifs à : ajouter un menu de mise en forme dans un formulaire


Copyright © 1997-2018 Hardware.fr SARL (Signaler un contenu illicite) / Groupe LDLC / Shop HFR