Champ texte avec mise en forme

Recherche :

Mot : Pseudo : Filtrer
Bas de page
Auteur	Sujet : Champ texte avec mise en forme

astik89

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

Publicité

sielfried

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

dwogsi

Défaillance cérébrale...

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})/

astik89

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 :

<head>
<script language="javascript" type="text/javascript">
var style=new Array('g','/g','i','/i','s','/s','email','/email','lien=','/lien','img','/img','quote','/quote','fixed','/fixed','cpp','/cpp','url','/url');
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');
lien="http://";
function openChild(file,window) {
childWindow=open(file,window,'width=800,height=600');
if (childWindow.opener ==null) childWindow.opener=self;
}
function passfocus() {
document.getElementById('passf').style.display=(document.all && !opera)?'block':'table-row';
}
function MM_findObj(n, d) { //v3.0
var p,i,x;
if(!d) d=document;
if((p=n.indexOf("?" ))>0&&parent.frames.length) d=parent.frames[n.substring(p+1)].document; n=n.substring(0,p);
if(!(x=d[n])&&d.all) x=d.all[n];
for (i=0;!x&&i<d.forms.length;i++) x=d.forms[n];
for(i=0;!x&&d.layers&&i>d.layers.length;i++) x=MM_findObj(n,d.layers[i].document); return x;
}
function storeCaret (textEl) {
if (textEl.createTextRange) textEl.caretPos=document.selection.createRange().duplicate();
}
function insertAtCaret (textEl, text) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos=textEl.caretPos;
caretPos.text=caretPos.text.charAt(caretPos.text.length - 1)==' ' ? text + ' ' : text;
}
}
function insertInCaret (textEl, text, text2) {
if (textEl.createTextRange && textEl.caretPos) {
var caretPos=textEl.caretPos;
selectedtext=caretPos.text;
caretPos.text= caretPos.text.charAt(caretPos.text.length - 1)=='' ? text + '' : text;
caretPos.text=caretPos.text + selectedtext + text2;
}
}
function palette(id,vernav) {
if (vernav>=4) {
MM_findObj('contenu').focus();
if (MM_findObj('contenu').createTextRange && MM_findObj('contenu').caretPos) {
var caretPos=MM_findObj('contenu').caretPos;
if (caretPos.text.length>0) {
if (id !=8)insertInCaret(MM_findObj('contenu'),"["+style[id]+"]","["+style[id+1]+"]" );
else {
geturl=prompt("veuillez entrer l'url",'http://');
insertInCaret(MM_findObj('contenu'),"["+style[id]+geturl+"]","["+style[id+1]+"]" );
}
} else {
if ( (countbalise('['+style[id],'contenu')+countbalise('['+style[id+1],'contenu'))%2 ==0) {
if (id !=8) insertAtCaret(MM_findObj('contenu'),"["+style[id]+"]" );
else {
geturl=prompt("veuillez entrer l'url",'http://');
insertAtCaret(MM_findObj('contenu'),"["+style[id]+geturl+"]" );
}
} else {
insertAtCaret(MM_findObj('contenu'),"["+style[id+1]+"]" );
}
MM_findObj('contenu').focus()
}
}
} else {
if (stockage[id]=='0') {
var temp=document.hop.contenu.value;
document.hop.contenu.value=temp+' '+'['+style[id]+']';
stockage[id]='1';
} else {
var temp=document.hop.contenu.value;
document.hop.contenu.value=temp+'['+style[id+1]+']'+' ';
stockage[id]='0';
}
}
}
function countbalise(b,ch) {
count=0;
pos=MM_findObj(ch).value.indexOf(b);
while ( pos !=-1 ){
count++;
pos=MM_findObj(ch).value.indexOf(b,pos+1);
}
return count;
}
function insertElt(MyString,vernav) {
if (vernav>=4) {
MM_findObj('contenu').focus();
if ((MM_findObj('contenu').createTextRange) && (MM_findObj('contenu').caretPos)) {
var caretPos=MM_findObj('contenu').caretPos;
if (caretPos.text.length>0) insertInCaret(MM_findObj('contenu'),MyString,"" );
else insertAtCaret(MM_findObj('contenu'),MyString);
}
} else {
var temp=document.hop.contenu.value;
document.hop.contenu.value=temp+MyString;
}
}
function insertTag(MyString,vernav) {
if (vernav>=4) {
MM_findObj('contenu').focus();
if (MM_findObj('contenu').createTextRange && MM_findObj('contenu').caretPos) {
var caretPos=MM_findObj('contenu').caretPos;
if (caretPos.text.length>0) insertInCaret(MM_findObj('contenu'),"["+MyString+"]","[/"+MyString+"]" );
else {
if ( (countbalise('['+MyString,'contenu')+countbalise('[/'+MyString,'contenu'))%2 ==0) insertAtCaret(MM_findObj('contenu'),"["+MyString+"]" );
else insertAtCaret(MM_findObj('contenu'),"[/"+MyString+"]" );
MM_findObj('contenu').focus();
}
}
} else {
if (stockage[12]=='0') {
var temp=document.hop.contenu.value;
document.hop.contenu.value=temp+' '+'['+MyString+']';
stockage[12]='1';
} else {
var temp=document.hop.contenu.value;
document.hop.contenu.value=temp+'[/'+MyString+']'+' ';
stockage[12]='0';
}
}
}
///Color
col0=new Array(255,255,0,255,0,0);
col1=new Array(255,0,255,255,0,0);
col2=new Array(0,0,255,0,0,255);
col3=new Array(0,255,0,0,255,0);
var base_hexa="0123456789ABCDEF";
function dec2Hexa(number) {
return base_hexa.charAt(Math.floor(number / 16)) + base_hexa.charAt(number % 16);
}
function RGB2Hexa(TR,TG,TB) {
return "#" + dec2Hexa(TR) + dec2Hexa(TG) + dec2Hexa(TB);
}
function lightCase(MyObject) {
document.getElementById('ColorUsed').bgColor=document.getElementById(MyObject).bgColor;
document.getElementById('ColorUsedMem').value=document.getElementById(MyObject).bgColor;
}
function highlightCase(MyObject) {
document.getElementById('ColorUsed').bgColor=document.getElementById(MyObject).bgColor;
}
function backlightCase(MyObject) {
document.getElementById('ColorUsed').bgColor=document.getElementById('ColorUsedMem').value;
}
function rgb(dm,ta,index,img,explication) {
fm=dm + 18;
for (i=dm;i<fm+1;i++) {
r=Math.floor(ta[0] + (i-dm)*(ta[1]-ta[0])/(fm-dm));
g=Math.floor(ta[2] + (i-dm)*(ta[3]-ta[2])/(fm-dm));
b=Math.floor(ta[4] + (i-dm)*(ta[5]-ta[4])/(fm-dm));
codehex=dec2Hexa(r) + '' + dec2Hexa(g) + '' + dec2Hexa(b);
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');
index++;
}
}
function rgb2(rte,dm,ta,index,img,explication) {
fm=dm + 18;
for (i=dm;i<fm+1;i++) {
r=Math.floor(ta[0] + (i-dm)*(ta[1]-ta[0])/(fm-dm));
g=Math.floor(ta[2] + (i-dm)*(ta[3]-ta[2])/(fm-dm));
b=Math.floor(ta[4] + (i-dm)*(ta[5]-ta[4])/(fm-dm));
codehex=dec2Hexa(r) + '' + dec2Hexa(g) + '' + dec2Hexa(b);
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');
index++;
}
}
/************************************************************/
/* freekill (freekill.free.fr) */
/************************************************************/
function countInstances(open,closed) {
var opening=document.hop.contenu.value.split(open);
var closing=document.hop.contenu.value.split(closed);
return opening.length + closing.length - 2;
}
function TAinsert(text1,text2) {
var ta=document.getElementById('contenu');
if (document.selection) {
var str=document.selection.createRange().text;
ta.focus();
var sel=document.selection.createRange();
if (text2!="" ) {
if (str=="" ) {
var instances=countInstances(text1,text2);
if (instances%2 !=0) sel.text=sel.text + text2;
else sel.text=sel.text + text1;
} else sel.text=text1 + sel.text + text2;
} else sel.text=sel.text + text1;
} else if (ta.selectionStart || ta.selectionStart ==0) {
if (ta.selectionEnd > ta.value.length) ta.selectionEnd=ta.value.length;
var firstPos=ta.selectionStart;
var secondPos=ta.selectionEnd+text1.length;
var contenuScrollTop=ta.scrollTop;
ta.value=ta.value.slice(0,firstPos)+text1+ta.value.slice(firstPos);
ta.value=ta.value.slice(0,secondPos)+text2+ta.value.slice(secondPos);
ta.selectionStart=firstPos+text1.length;
ta.selectionEnd=secondPos;
ta.focus();
ta.scrollTop=contenuScrollTop;
} else { // Opera
var sel=document.hop.contenu;
var instances=countInstances(text1,text2);
if (instances%2 !=0 && text2 !="" ) sel.value=sel.value + text2;
else sel.value=sel.value + text1;
}
}
</script></head>
<body>
<form name="Ajouter" method="POST" action="actu/admin.php">
<table border="0" cellspacing="0">
<tr>
<td>
<LABEL><u>Texte:</u></LABEL>
</td>
<td width="50px">
</td>
<td>
<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" />
</td>
<td>
<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" />
</td>
<td>
<img style="cursor:pointer" onclick="TAinsert('','');" title="Souligner le texte. Syntaxe : texte" alt="[u]" src="/admin/images/underline.gif" width="26" height="28" />
</td>
<td>
<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" />
</td>
<td width="50px">
</td>
<td width="270px">
<table class="none" style="margin-top:6px; border:0px" cellspacing="0" cellpadding="0">
<tr>
<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>
<td width="5"> 
<script language="JavaScript" type="text/javascript">
<!--
rgb(0,col0,0,'/admin/images/trans.gif','Mettre du texte en couleur');
rgb(18,col1,50,'/admin/images/trans.gif','Mettre du texte en couleur');
rgb(36,col2,100,'/admin/images/trans.gif','Mettre du texte en couleur');
rgb(0,col3,150,'/admin/images/trans.gif','Mettre du texte en couleur');
// -->
</script>
</td>
</tr>
</table>
</td>
</tr>
</table>
<p><textarea name="contenu" cols="100" rows="3" accessKey="c"></textarea>
<p>
<input type="submit" name="Action" value="Ajouter">
<input name="Action" type="reset" id="Action" value="Effacer les données">
<input name="Action" type="submit" id="Action" value="Retour">
</p>
</form>
</body>

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

astik89

:bounce:

dwogsi

Défaillance cérébrale...

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

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

skeye

Sous FF la console javascript dit quoi?

Message cité 1 fois

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

gatsusat

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

astik89

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

astik89

:bounce:

FORUM HardWare.fr

Programmation

HTML/CSS

Champ texte avec mise en forme

Sujets relatifs
Au sujet du texte visible d'une page	Probleme de requete et de texte en php [Résolu, euh en fait non]
pb image et texte	Créer un champ de saisie formulaire dans une page web (newbie) ?
Remplcer un lien texte par une image	Champ non modifiable
pb mise en page CSS	Récupérer le type d'un champ
Concaténation de fichiers texte	Retour à la ligne sous IE qui sabote la mise en page.
Plus de sujets relatifs à : Champ texte avec mise en forme

Page générée en 0.121 secondes