ajouter un menu de mise en forme dans un formulaire

ajouter un menu de mise en forme dans un formulaire - PHP - Programmation

Marsh Posté le 01-08-2014 à 18:04:18    

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


 
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'];
  15. //Si la news existe
  16. if(isset($news[$id])) {
  17. //On efface l'index correspondant à l'id de la news
  18. unset($news[$id]);
  20. //Puis on sauvegarde le tout
  21. file_put_contents('news.txt', serialize($news));
  23. echo 'La news a bien &eacute;t&eacute; supprim&eacute;e !';
  24. }
  25. else {
  26. echo 'La news n\'existe pas.';
  27. }
  28. echo '<br />';
  29. echo '<a href="liste_news.php">Retour</a>';
  30. ?>


 
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
Reply

Marsh Posté le 01-08-2014 à 18:04:18   

Reply

Marsh Posté le 02-08-2014 à 11:19:57    

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.)

Reply

Marsh Posté le 02-08-2014 à 16:26:36    

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

Reply

Marsh Posté le 02-08-2014 à 17:43:07    

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

Message cité 1 fois
Reply

Marsh Posté le 02-08-2014 à 18:30:31    

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

Message cité 1 fois
Reply

Marsh Posté le 03-08-2014 à 07:51:58    

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.

Reply

Marsh Posté le 03-08-2014 à 14:33:29    

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

Reply

Marsh Posté le 03-08-2014 à 18:48:56    

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


Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed