PHP

ajouter un menu de mise en forme dans un formulaire

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : ajouter un menu de mise en forme dans un formulaire

dante05

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 :

<body>
<form action="" method="post">
<label for="contenu">Contenu de la news :</label> <br />
<textarea name="contenu" id="contenu" rows="20" cols="60"></textarea><br />
<input type="submit" value="Ajouter la news" />
<p> </p>
<?php
if($_POST['contenu']){
//On définit les variables
$contenu = $_POST['contenu'];
//Puis on récupère les news qui existent déjà, et on stocke le tout dans $news
$news = unserialize(file_get_contents('news.txt'));
//On ajoute les données de la news à la suite de l'array
$news[] = array('contenu' => $contenu);
//Et pour finir, on enregistre le tout
file_put_contents('news.txt', serialize($news));
echo 'La news a bien été ajoutée !';
} else {
//Affichage du formulaire
}
?>
</body>

Ce dernier possède le formulaire en question et permet de valider le message.

- Fichier 'liste_news.php'

Code :

<?php
$liste_news = unserialize(file_get_contents('news.txt'));
if(!empty($liste_news)) {
foreach($liste_news as $id => $news) {
$news = array_map('htmlspecialchars', $news);
?>
<p><?php echo $news['contenu'] ?></p>
<i><a href="supprimer_news.php?id=<?php echo $id ?>" onclick="return confirm('Etes-vous sûr de vouloir supprimer cette news ?');">Supprimer</a>
 </i>
<br /><br />
<?php
}
}
else {
echo 'Il n\'y a aucune news pour le moment<br />';
}
echo '<a href="ajouter_news.php">Ajouter une news</a>';
?>

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

et un fichier 'supprimer_news.php'

Code :

<body>
<?php
//Si l'id passé en paramètre dans l'url n'existe pas, c'est que le visiteur a été amenené ici par hasard
if(!isset($_GET['id'])) {
//Donc on redirige vers index.php
header('Location: ajouter_news.php');
//Puis on stoppe l'exécution du script
exit();
}
//On récupère l'array des news
$news = unserialize(file_get_contents('news.txt'));
//Puis l'id passé en paramètre
$id = (int) $_GET['id'];
//Si la news existe
if(isset($news[$id])) {
//On efface l'index correspondant à l'id de la news
unset($news[$id]);
//Puis on sauvegarde le tout
file_put_contents('news.txt', serialize($news));
echo 'La news a bien été supprimée !';
}
else {
echo 'La news n\'existe pas.';
}
echo '<br />';
echo '<a href="liste_news.php">Retour</a>';
?>

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

Publicité

olivthill

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

dante05

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

David Boring

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

Message cité 1 fois

dante05

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

olivthill

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.

dante05

Bonjour, merci pour le script c'est exactement ce que je cherche.

Alors je l'ai intégré:

Code :

<html>
<head>
<meta charset="utf-8">
<title>Document sans titre</title>
</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.myform.contenu;
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>
<form action="" method="post" form name='myform'>
<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">
<label for="contenu">Contenu de la news :</label> <br />
<textarea name="contenu" cols="60" rows="20" id="contenu">
</textarea
><br />
<input type="submit" value="Ajouter la news" />
<?php
if($_POST['contenu']){
//On définit les variables
$contenu = $_POST['contenu'
];
//Puis on récupère les news qui existent déjà, et on stocke le tout dans $news
$news = unserialize(file_get_contents('news.txt'));
//On ajoute les données de la news à la suite de l'array
$news[] = array('contenu' => $contenu);
//Et pour finir, on enregistre le tout
file_put_contents('news.txt', serialize($news));
echo 'La news a bien été ajoutée !';
} else {
//Affichage du formulaire
}
?>
</body>
</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é

olivthill

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

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 autre	Ajouter 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

Page générée en 0.069 secondes