Champ texte avec mise en forme

Champ texte avec mise en forme - HTML/CSS - Programmation

Marsh Posté le 18-09-2005 à 01:16:03    

Je souhaite intégrer dans un formulaire un champ texte multiple pour que l'utilisateur puisse mettre en forme (gras, italique, couleur, lien) son texte, qui sera stocké dans une base MySQL et sera ensuite réinjecté dans un script php.
Comment faire ceci, ou où puis-je le trouver tout fait??
 
En gros je veux le meme principe que la page où on tape les messages dans HFR
 
Merci
Astik


Message édité par astik89 le 18-09-2005 à 15:54:18
Reply

Marsh Posté le 18-09-2005 à 01:16:03   

Reply

Marsh Posté le 18-09-2005 à 10:53:29    

C'est du javascript, pas du PHP.
 
Et si tu fouilles un peu dans les sources du forum tu peux trouver facilement.


---------------
StarCraft Professional Gaming Database | [Ze Topic] Starcraft/BroodWar
Reply

Marsh Posté le 18-09-2005 à 12:58:58    

Et je dirais même que que c'est dans "Windows, Software & Réseaux" que ca va ce genre de topic, mais bon...


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 18-09-2005 à 21:36:20    

Merci, je n'avais pas pensé à regarder dans les sources HFR.
J'ai réussi à fiare ce que je voulais mais sa ne fonctionne que sous IE, sous firefox les balises ne sont pas insérées lorsqu'on clique dessus.
 

Code :
  1. <head>
  2. <script language="javascript" type="text/javascript">
  3. var style=new Array('g','/g','i','/i','s','/s','email','/email','lien=','/lien','img','/img','quote','/quote','fixed','/fixed','cpp','/cpp','url','/url');
  4. var stockage=new Array('0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0','0');
  5. lien="http://";
  7. function openChild(file,window) {
  8. childWindow=open(file,window,'width=800,height=600');
  9. if (childWindow.opener ==null) childWindow.opener=self;
  10. }
  11. function passfocus() {
  12. document.getElementById('passf').style.display=(document.all && !opera)?'block':'table-row';
  13. }
  15. function MM_findObj(n, d) { //v3.0
  16. var p,i,x;
  17. if(!d) d=document;
  18. if((p=n.indexOf("?" ))>0&&parent.frames.length) d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
  19. if(!(x=d[n])&&d.all) x=d.all[n];
  20. for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
  21. for(i=0;!x&&d.layers&&i>d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
  22. }
  24. function storeCaret (textEl) {
  25. if (textEl.createTextRange) textEl.caretPos=document.selection.createRange().duplicate();
  26. }
  28. function insertAtCaret (textEl, text) {
  29. if (textEl.createTextRange && textEl.caretPos) {
  30.  var caretPos=textEl.caretPos;
  31.  caretPos.text=caretPos.text.charAt(caretPos.text.length - 1)==' ' ? text + ' ' : text;
  32. }
  33. }
  35. function insertInCaret (textEl, text, text2) {
  36. if (textEl.createTextRange && textEl.caretPos) {
  37.  var caretPos=textEl.caretPos;
  38.  selectedtext=caretPos.text;
  39.  caretPos.text= caretPos.text.charAt(caretPos.text.length - 1)=='' ? text + '' : text;
  40.  caretPos.text=caretPos.text + selectedtext + text2;
  41. }
  42. }
  44. function palette(id,vernav) {
  45. if (vernav>=4) {
  46.  MM_findObj('contenu').focus();
  47.  if (MM_findObj('contenu').createTextRange && MM_findObj('contenu').caretPos) {
  48.   var caretPos=MM_findObj('contenu').caretPos;
  49.   if (caretPos.text.length>0) {
  50.    if (id !=8)insertInCaret(MM_findObj('contenu'),"["+style[id]+"]","["+style[id+1]+"]" );
  51.    else {
  52.     geturl=prompt("veuillez entrer l'url",'http://');
  53.     insertInCaret(MM_findObj('contenu'),"["+style[id]+geturl+"]","["+style[id+1]+"]" );
  54.    }
  55.   } else {
  56.    if ( (countbalise('['+style[id],'contenu')+countbalise('['+style[id+1],'contenu'))%2 ==0) {
  57.     if (id !=8) insertAtCaret(MM_findObj('contenu'),"["+style[id]+"]" );
  58.     else {
  59.      geturl=prompt("veuillez entrer l'url",'http://');
  60.      insertAtCaret(MM_findObj('contenu'),"["+style[id]+geturl+"]" );
  61.     }
  62.    } else {
  63.     insertAtCaret(MM_findObj('contenu'),"["+style[id+1]+"]" );
  64.    }
  65.    MM_findObj('contenu').focus()
  66.   }
  67.  }
  68. } else {
  69.  if (stockage[id]=='0') {
  70.   var temp=document.hop.contenu.value;
  71.   document.hop.contenu.value=temp+' '+'['+style[id]+']';
  72.   stockage[id]='1';
  73.  } else {
  74.   var temp=document.hop.contenu.value;
  75.   document.hop.contenu.value=temp+'['+style[id+1]+']'+' ';
  76.   stockage[id]='0';
  77.  }
  78. }
  79. }
  81. function countbalise(b,ch) {
  82. count=0;
  83. pos=MM_findObj(ch).value.indexOf(b);
  84. while ( pos !=-1 ){
  85.  count++;
  86.  pos=MM_findObj(ch).value.indexOf(b,pos+1);
  87. }
  88. return count;
  89. }
  91. function insertElt(MyString,vernav) {
  92. if (vernav>=4) {
  93.  MM_findObj('contenu').focus();
  94.  if ((MM_findObj('contenu').createTextRange) && (MM_findObj('contenu').caretPos)) {
  95.   var caretPos=MM_findObj('contenu').caretPos;
  96.   if (caretPos.text.length>0) insertInCaret(MM_findObj('contenu'),MyString,"" );
  97.   else insertAtCaret(MM_findObj('contenu'),MyString);
  98.  }
  99. } else {
  100.  var temp=document.hop.contenu.value;
  101.  document.hop.contenu.value=temp+MyString;
  102. }
  103. }
  105. function insertTag(MyString,vernav) {
  106. if (vernav>=4) {
  107.  MM_findObj('contenu').focus();
  108.  if (MM_findObj('contenu').createTextRange && MM_findObj('contenu').caretPos) {
  109.   var caretPos=MM_findObj('contenu').caretPos;
  110.   if (caretPos.text.length>0) insertInCaret(MM_findObj('contenu'),"["+MyString+"]","[/"+MyString+"]" );
  111.   else {
  112.    if ( (countbalise('['+MyString,'contenu')+countbalise('[/'+MyString,'contenu'))%2 ==0) insertAtCaret(MM_findObj('contenu'),"["+MyString+"]" );
  113.    else insertAtCaret(MM_findObj('contenu'),"[/"+MyString+"]" );
  114.    MM_findObj('contenu').focus();
  115.   }
  116.  }
  117. } else {
  118.  if (stockage[12]=='0') {
  119.   var temp=document.hop.contenu.value;
  120.   document.hop.contenu.value=temp+' '+'['+MyString+']';
  121.   stockage[12]='1';
  122.  } else {
  123.   var temp=document.hop.contenu.value;
  124.   document.hop.contenu.value=temp+'[/'+MyString+']'+' ';
  125.   stockage[12]='0';
  126.  }
  127. } 
  128. }
  131. ///Color
  132. col0=new Array(255,255,0,255,0,0);
  133. col1=new Array(255,0,255,255,0,0);
  134. col2=new Array(0,0,255,0,0,255);
  135. col3=new Array(0,255,0,0,255,0);
  137. var base_hexa="0123456789ABCDEF";
  138. function dec2Hexa(number) {
  139. return base_hexa.charAt(Math.floor(number / 16)) + base_hexa.charAt(number % 16);
  140. }
  142. function RGB2Hexa(TR,TG,TB) {
  143. return "#" + dec2Hexa(TR) + dec2Hexa(TG) + dec2Hexa(TB);
  144. }
  146. function lightCase(MyObject) {
  147. document.getElementById('ColorUsed').bgColor=document.getElementById(MyObject).bgColor;
  148. document.getElementById('ColorUsedMem').value=document.getElementById(MyObject).bgColor;
  150. }
  152. function highlightCase(MyObject) {
  153. document.getElementById('ColorUsed').bgColor=document.getElementById(MyObject).bgColor;
  154. }
  156. function backlightCase(MyObject) {
  157. document.getElementById('ColorUsed').bgColor=document.getElementById('ColorUsedMem').value;
  158. }
  160. function rgb(dm,ta,index,img,explication) {
  161. fm=dm + 18;
  162. for (i=dm;i<fm+1;i++) {
  163.  r=Math.floor(ta[0] + (i-dm)*(ta[1]-ta[0])/(fm-dm));
  164.  g=Math.floor(ta[2] + (i-dm)*(ta[3]-ta[2])/(fm-dm));
  165.  b=Math.floor(ta[4] + (i-dm)*(ta[5]-ta[4])/(fm-dm));
  166.  codehex=dec2Hexa(r) + '' + dec2Hexa(g) + '' + dec2Hexa(b);
  167.  document.write('<td style="cursor:pointer" onclick="TAinsert(\'[\'+document.getElementById(\'tableId'+index+'\').bgColor+\']\',\'[/\'+document.getElementById(\'tableId'+index+'\').bgColor+\']\');lightCase(\'tableId'+index+'\');\" onmouseover=\"highlightCase(\'tableId'+index+'\');" onmouseout="backlightCase();" id="tableId'+index+'" bgcolor="'+RGB2Hexa(r,g,b)+'" width="3" height="17"><img title="'+explication+' : [#'+codehex+']text[/#'+codehex+']" src="'+img+'" alt="" width="3" height="17" /></td>\n');
  168.  index++;
  169. }
  170. }
  172. function rgb2(rte,dm,ta,index,img,explication) {
  173. fm=dm + 18;
  174. for (i=dm;i<fm+1;i++) {
  175.  r=Math.floor(ta[0] + (i-dm)*(ta[1]-ta[0])/(fm-dm));
  176.  g=Math.floor(ta[2] + (i-dm)*(ta[3]-ta[2])/(fm-dm));
  177.  b=Math.floor(ta[4] + (i-dm)*(ta[5]-ta[4])/(fm-dm));
  178.  codehex=dec2Hexa(r) + '' + dec2Hexa(g) + '' + dec2Hexa(b);
  179.  document.write('<td style="cursor:pointer" onclick="FormatText(\''+rte+'\',\'forecolor\',document.getElementById(\'tableId'+index+'\').bgColor);lightCase(\'tableId'+index+'\');" onmouseover=\"highlightCase(\'tableId'+index+'\');" onmouseout="backlightCase();" id="tableId'+index+'" bgcolor="' + RGB2Hexa(r,g,b) + '" width="2" height="15"><img title="'+explication+'" src="'+img+'" alt="" width="2" height="15" /></td>\n');
  180.  index++;
  181. }
  182. }
  183. /************************************************************/
  184. /* freekill (freekill.free.fr)      */
  185. /************************************************************/
  187. function countInstances(open,closed) {
  188. var opening=document.hop.contenu.value.split(open);
  189. var closing=document.hop.contenu.value.split(closed);
  190. return opening.length + closing.length - 2;
  191. }
  193. function TAinsert(text1,text2) {
  194. var ta=document.getElementById('contenu');
  195. if (document.selection) {
  196.  var str=document.selection.createRange().text;
  197.  ta.focus();
  198.  var sel=document.selection.createRange();
  199.  if (text2!="" ) {
  200.   if (str=="" ) {
  201.    var instances=countInstances(text1,text2);
  202.    if (instances%2 !=0) sel.text=sel.text + text2;
  203.    else sel.text=sel.text + text1;
  204.   } else sel.text=text1 + sel.text + text2;
  205.  } else sel.text=sel.text + text1;
  206. } else if (ta.selectionStart || ta.selectionStart ==0) {
  207.  if (ta.selectionEnd > ta.value.length) ta.selectionEnd=ta.value.length;
  208.  var firstPos=ta.selectionStart;
  209.  var secondPos=ta.selectionEnd+text1.length;
  210.  var contenuScrollTop=ta.scrollTop;
  212.  ta.value=ta.value.slice(0,firstPos)+text1+ta.value.slice(firstPos);
  213.  ta.value=ta.value.slice(0,secondPos)+text2+ta.value.slice(secondPos);
  215.  ta.selectionStart=firstPos+text1.length;
  216.  ta.selectionEnd=secondPos;
  217.  ta.focus();
  218.  ta.scrollTop=contenuScrollTop;
  219. } else { // Opera
  220.  var sel=document.hop.contenu;
  221.  var instances=countInstances(text1,text2);
  222.  if (instances%2 !=0 && text2 !="" ) sel.value=sel.value + text2;
  223.  else sel.value=sel.value + text1;
  224. }
  225. }
  226. </script></head>
  228. <body>
  229. <form name="Ajouter" method="POST" action="actu/admin.php">
  230. <table border="0" cellspacing="0">
  231.   <tr>
  232.     <td>
  233.   <LABEL><u>Texte:</u></LABEL>
  234.  </td>
  235.  <td width="50px">
  236.  </td>
  237.  <td>
  239.   <img style="cursor:pointer" class="text_bold" onclick="TAinsert('','');" title="Mettre en gras le texte. Syntaxe : texte" alt="[b]" src="/admin/images/bold.gif" width="27" height="28" />
  240.  </td>
  241.  <td>
  242.   <img style="cursor:pointer" onclick="TAinsert('[i]','');" title="Mettre en italique le texte. Syntaxe : texte" alt="[i]" src="/admin/images/italic.gif" width="25" height="28" />
  243.  </td>
  244.  <td>
  245.   <img style="cursor:pointer" onclick="TAinsert('','');" title="Souligner le texte. Syntaxe : texte" alt="[u]" src="/admin/images/underline.gif" width="26" height="28" />
  246.  </td>
  247.  <td>
  249.   <img style="cursor:pointer" onclick="TAinsert('http://adresse.du.site.com;','');" title="Insérer une URL. Syntaxe : texte" alt="[url]" src="/admin/images/url.gif" width="26" height="28" />
  250.  </td>
  251.  <td width="50px">
  252.  </td>
  253.     <td width="270px">
  254.   <table class="none" style="margin-top:6px; border:0px" cellspacing="0" cellpadding="0">
  255.    <tr>
  256.     <td style="cursor:pointer; width:15px; border:1px solid #000000" id="ColorUsed" title="Dernière couleur sélectionnée"><img src="/admin/images/trans.gif" alt="" width="15" height="17" onclick="TAinsert('['+document.getElementById('ColorUsed').bgColor+']','[/'+document.getElementById('ColorUsed').bgColor+']');" /><input type="hidden" value="" name="ColorUsedMem" id="ColorUsedMem" /></td>
  257.     <td width="5">&nbsp;
  259.      <script language="JavaScript" type="text/javascript">
  260.       <!--
  261.       rgb(0,col0,0,'/admin/images/trans.gif','Mettre du texte en couleur');
  262.       rgb(18,col1,50,'/admin/images/trans.gif','Mettre du texte en couleur');
  263.       rgb(36,col2,100,'/admin/images/trans.gif','Mettre du texte en couleur');
  264.       rgb(0,col3,150,'/admin/images/trans.gif','Mettre du texte en couleur');
  265.       // -->
  266.      </script>
  267.     </td>
  268.    </tr>
  269.   </table>
  270.  </td>
  271.   </tr>
  272. </table>
  273.     <p><textarea name="contenu" cols="100" rows="3" accessKey="c"></textarea>
  274.     <p>
  275.       <input type="submit" name="Action" value="Ajouter">
  276.       <input name="Action" type="reset" id="Action" value="Effacer les données">
  277.       <input name="Action" type="submit" id="Action" value="Retour">
  278.     </p>
  279. </form>
  280. </body>


Message édité par astik89 le 18-09-2005 à 21:36:43
Reply

Marsh Posté le 19-09-2005 à 21:16:34    

:bounce:  :bounce:

Reply

Marsh Posté le 20-09-2005 à 16:47:10    

La franchement j'ais pas le courage de regarder tout le code...  :o


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 20-09-2005 à 16:51:12    

Sous FF la console javascript dit quoi?:o

Message cité 1 fois

---------------
Can't buy what I want because it's free -
Reply

Marsh Posté le 20-09-2005 à 17:28:09    

ya du code de merde de droite et de gauche ca vaut rien ton JS là

Reply

Marsh Posté le 20-09-2005 à 18:53:09    

skeye a écrit :

Sous FF la console javascript dit quoi?:o


Citation :

Erreur : ta has no properties
Fichier Source : http://admin.artdeladentelleenbour [...] jouter.php
Ligne : 245

Reply

Marsh Posté le 21-09-2005 à 21:09:56    

:bounce:

Reply

Sujets relatifs:

Leave a Replay

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