Bouton Gras, Italique et souligné
Bonjour,
Je suis entrain de confectionner une partie administrateur en PHP. Dans cette partie, j'intègre un script permettant d'écrir, modifier et supprimer mes news. J'aimerais ajouter quelques boutons de mise en forme : gras, souligné, italique.
Malheureusement, je n'ai aucune connaissance en JS. :s
Donc si vous pouviez m'aiguiller. :)
Voici le formulaire en HTML.
<!DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd>
<html xmlns=http://www.w3.org/1999/xhtml>
<head>
<meta http-equiv=Content-Type content=text/html; charset=utf-8 />
<title>Les Gourmets Explorateurs - Admin</title>
<script>
</script>
</head>
<body>
<div align="center">
<a href="deconnexion.php">Déconnexion</a><br/><br/>
<form method="post">
Titre : <br/><br/>
<input type="text" name="titre" style="width:400px;"><br/><br/><br/>
Contenu : <br/><br/>
<input type="button" value="Gras" />
<input type="button" value="Italique" name="Italique" />
<input type="button" value="Souligné" name="Souligné" /><br>
<textarea name="contenu" id="contenu" style="width:400px; height:200px;"></textarea><br/><br/>
<input type="submit" name="envoyer" value="Envoyer" />
</form>
</body>
</html>
Merci et bon week-end. :)
par JeanJean75,
bonjour,
>>je n'ai aucune connaissance en JS
soit vous prenez le temps de vous former et
d'apprendre, vous verrez, c'est passionnant,
soit vous "achetez" un script tout fait,
recherchez donc du coté de "wysiwyg"
@+
Salut,
regarde du cote de FCKeditor
par Dr_von_scott,
Bonjour,
Merci de m'avoir répondu si rapidement. ;)
Bul => Je sais que le JS peut s'avérer très intéressent en vue de ces grandes possibilités. Mais actuellement je suis entrain de me former au PHP, et je n'ai pas trop envie d'apprendre deux langages différents en même temps. :P
Dr_Von_scott =>
Merci de ton aide. ;) Je me suis renseigné dessus et j'ai vu qu'il faisait vraiment usine à gaz... Je souhaite avoir un script très léger. ;)
Si quelqu'un avec de l'expérience en JS pourrait me donner quelques pistes à suivre ou un script déjà existant faisant juste les fonctions que je demande, je suis preneur. :)
Merci.
par JeanJean75,
tinyMCE, en récupérant la configuration la plus light, tu aura seulement les fonctions que tu cherches ...
sinon, en JS, tu peux faire un truc rapide pour ses 3/4 boutons :
var button = function(balise){
var textarea = document.getElementById('textarea');
textarea.value = textarea.value+'['+balise+'][/'+balise+']';
}
et coté HTML :
<img src="..." alt="bold" onclick="button('B');return;" />
<img src="..." alt="Italic" onclick="button('I');return;" />
<img src="..." alt="Underline" onclick="button('U');return;" />
<textarea name="content" id="textarea"></textarea>
il te faudra le tester, je fais ça en live, sans avoir encor branché ma prefusion de caféine ... c'est pour dire ^^
Voila !... @+
Eh bien merci, c'est exactement ce que je cherchais et ça fonctionne. :)
par JeanJean75,
Bonjour,
Je remonte un peu le topic, car j'ai continué le script de ma page admin.php mais dorénavant les boutons ne fonctionnent plus.
Quand je clique dessus, rien ne ce passe. :s
<code>var button = function(balise){
var textarea = document.getElementById('textarea');
textarea.value = textarea.value+'['+balise+'][/'+balise+']';
} </code>
<code>
<input type="button" value="Gras" alt="bold" onclick="button('B');return;" />
<input type="button" value="Italique" alt="Italic" onclick="button('I');return;" />
<input type="button" value="Souligné" alt="Underline" onclick="button('U');return;" /> <br>
</code>
par JeanJean75,
ton textarea a t il toujours un id="textarea" ... ?
Merci de ta réponse. ;)
En effet, il n'y figurait plus. :s Il a du être oublié durant les multiples ré-écritures de script.
Bonne soirée. ;)
par JeanJean75,
Je vais soliciter encore un peu ton savoir faire en JS ^^
Les boutons fonctionne très bien. Mais je viens de m'apercevoir que j'avais oublié le bouton "retour à la ligne" qui se traduite par l'affichage d'une <br/> dans le textearea. Donc j'ai ajouté un bouton, mais quand je clique sur celui-ci, il m'affiche <br/></br/>.
Je voulais savoir qu'est ce que je devais rajouter dans le code JS pour que quand je clique sur le bouton retour à la ligne, je n'ai que <br/>. :)
Merci bien. :)
par JeanJean75,
pour les retour à la ligne, il vaut mieux que tu utilise nl2br() en php
Oui, c'est ce que j'utilise. Mais pour plus de confort, j'aimerais aussi rajouter <br/> pour faire des sauts de ligne etc... ;)
par JeanJean75,
à force, je vais finir par rejoindre l'avis de mes confrères : installes un éditeur WySyWyg !....
l'intérêt de la petite fonction que je t'ai donné plus haut, est de simuler l'insertion de BBcodes ... si maintenant, tu veux directement mettre du HTML, il est inutile de te contraindre à faire une lecture PHP pour transformer le BBCode en HTML !... c'est illogique !...
cela dit si tu y tiens vraiment, la fonction est simple à monter :
var insertBr = function(){
document.getElementById('textarea').value += '<br/>';
}
Oulah je suis vraiment désolé ! J'ai parlé trop vite !
Enfaite, Je n'avais pas entièrement vu l'utilité de la balise nl2br(). Je l'utilisais dans mon script pour éviter que le texte dépasse de mon cadre et aille à la ligne automatiquement ! :)
Mais ce n'est que ce matin où j'ai vu que lorsque je faisais des passages de lignes avec "Entré", ils s'affichaient dans le bloc !
Merci et désolé. ;)
par JeanJean75,
Ya pas de mal ;)