Faire une barre de mise en forme pour une textarea

Faire une barre de mise en forme pour une textarea - HTML/CSS - Programmation

Marsh Posté le 28-02-2005 à 16:38:23    

Bonjour
 
Je souhaite effectuer une barre de mise en forme pour une textarea (dans 1  Système de news) à la manière de ce forum  :love: . Mais je connais pas le javascript, voilà ce que j'ai trouvé :
 

Code :
  1. <html>
  2. <head>
  3. <title>Ajouter du texte au milieu d'un textarea</title>
  4. </head>
  5. <body>
  6. <form name="poster"
  7.    onSubmit="alert('Script by iubito\nhttp://iubito.free.fr\niubito [at] asp-php [point] net');return false;">
  8. <p>Mise en forme du texte :
  9.    <a href="javascript:AddText('','','');">URL</a>
  10.    | <a href="javascript:AddText('[email]','','[/email]');">Email</a>
  11.    | <a href="javascript:AddText('','','');">Gras</a>
  12.    | <a href="javascript:AddText('','','');">Italique</a>
  13.    | <a href="javascript:AddText('','','');">Souligné</a>...
  14. <br>
  15. Smileys :
  16.    <a href="javascript:AddText('',':)','');">Content</a>
  17.    | <a href="javascript:AddText('',':(','');">Pas content</a>
  18.    | <a href="javascript:AddText('','8o)','');">Faire le clown</a>
  19.    | <a href="javascript:AddText('',';-D','');">LOL</a>...
  20. </p>
  21. <script language="JavaScript" type="text/javascript">
  22. /*function storeCaret(text)
  23. { // voided
  24. }
  25. */
  26. function AddText(startTag,defaultText,endTag)
  27. {
  28.    with(document.poster)
  29.    {
  30.       if (message.createTextRange)
  31.       {
  32.          var text;
  33.          message.focus(message.caretPos);
  34.          message.caretPos = document.selection.createRange().duplicate();
  35.          if(message.caretPos.text.length>0)
  36.          {
  37.             //gère les espace de fin de sélection. Un double-click sélectionne le mot
  38.             //+ un espace qu'on ne souhaite pas forcément...
  39.             var sel = message.caretPos.text;
  40.             var fin = '';
  41.             while(sel.substring(sel.length-1, sel.length)==' ')
  42.             {
  43.                sel = sel.substring(0, sel.length-1)
  44.                fin += ' ';
  45.             }
  46.             message.caretPos.text = startTag + sel + endTag + fin;
  47.          }
  48.          else
  49.             message.caretPos.text = startTag+defaultText+endTag;
  50.       }
  51.       else message.value += startTag+defaultText+endTag;
  52.    }
  53. }
  54. </script>
  56. <textarea
  57.    rows="8"
  58.    cols="30"
  59.    name="message"
  60.    wrap="virtual"
  61.    onmouseover="this.focus();">
  62. Tape du texte ici,
  63. fais une sélection puis clique sur un lien,
  64. place ton curseur au beau milieu de ton texte,
  65. clique sur un lien... éclate-toi bien !
  66. </textarea><br>
  67. <input type="submit" name="soumettre" value="envoyer">
  68. </form>
  69. </body>
  70. </html>


 
Le problème est que lorsque l'on clique sur gras, cela ajoute juste les balises ouvrantes et fermantes. Je voudrai cela :
 
- si une sélection de texte est active, placer la 'balise' ouvrante (de la propriété cliquée) juste devant la sélection et la 'balise' fermante juste après le dernier caractère sélectionné.
- si il n'y a pas de sélection de texte, remonter le texte à l'envers depuis la position du curseur pour vérifier si il existe une 'balise' ouvrante de ce type non fermée. Si c'est le cas, insérer une 'balise' fermante, sinon insérer une 'balise' ouvrante.
 
Comme sur le forum hardware   :sol:  
 
Merci pour votre aide !

Reply

Marsh Posté le 28-02-2005 à 16:38:23   

Reply

Marsh Posté le 28-02-2005 à 16:39:16    

Ben pompe le code du forum hardware [:spamafote]

Reply

Marsh Posté le 28-02-2005 à 17:14:19    

Bah j'y arrive pas  :cry:  
A part le c et le php je suis incapable de décortiquer du code. Je piges pas grand chose au javascipt.
En copiant tout le code source, ca ne me permet pas de cliquer sur les différents boutons (gras,italique,.....), j'en déduis que tout n'est pas affiché ?????
 
SVP de l'aide  :sweat: Merci

Reply

Marsh Posté le 28-02-2005 à 18:45:48    

Oula, si tu piges rien au JS, laisse tomber [:spamafote]

Reply

Marsh Posté le 28-02-2005 à 20:12:40    

Si tu piges le C et le php, je vois pas ou est le probleme. Le javascript n'a rien de "sorcier"...

Reply

Marsh Posté le 01-03-2005 à 09:36:12    

Ouais c'est clair qu'au niveau de la syntaxe ca ressemble au C et au php mais il y a quand meme des trucs louches genre

Code :
  1. message.caretPos.text = startTag+defaultText+endTag


ou bien

Code :
  1. message.caretPos = document.selection.createRange().duplicate();


Je ne comprends pas vraiment ce que font ces variables et fonctions, le seul truc que je piges là dedans ce que ca a l'air de fonctionner comme les structures en C  :whistle:  
Le problème est que je ne sais pas comment agir sur le curseur ou la sélection  :sarcastic:  
Mais bon je vais essayer de chercher encore une fois
Un petit coup de main me ferait pas de mal, merci quand même

Reply

Sujets relatifs:

Leave a Replay

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