Editeur post

Répondre


Cette question est un moyen d’empêcher des soumissions automatisées de formulaires par des robots.
Smileys
:D :) :( :o :shock: :? 8-) :lol: :x :P :oops: :cry: :evil: :twisted: :roll: :wink: :!: :?: :idea: :arrow: :| :mrgreen: =D> #-o =P~ :^o :non: :priere: 8-|
Voir plus de smileys
  Revue du sujet
 

  Étendre la vue Revue du sujet : Editeur post

par kmeleon » 11 juil. 2005, 01:16

Si tu t'amuse à copier-coller le code de BBcode, tu n'ira pas très loin dans la compréhension. Commence par ca:

Code : Tout sélectionner

<script language="javascript" type="text/javascript"> <!-- function AddText(text) { text = ' ' + text + ' '; if (opener.document.forms['poster'].data.createTextRange && opener.document.forms['poster'].data.caretPos) { var caretPos = opener.document.forms['post'].data.caretPos; caretPos.text = caretPos.text.charAt(caretPos.text.length - 1) == ' ' ? text + ' ' : text; opener.document.forms['poster'].data.focus(); } else { opener.document.forms['poster'].data.value += text; opener.document.forms['poster'].data.focus(); } } //--> </script>
Qui te permet d'insérer toutes sortes de balises dans une textarea...

Post

par Flanders » 10 juil. 2005, 16:29

Tu avais raison!
J'ai essayé de trouver une solution et voilà ce que j'ai réussi à faire.
J'ai juste encore un pb avec le retour à la ligne que j'ai encodé en JS par alt+r

Je vais essayer de remédier à ce pb. Si vous avez une idée.

Merci

@+

PS: exemple avec une page dont le nom est test.php
<table width="100%" cellspacing="0" cellpadding="5" border="0" align="center">

<td class="bodyline">

<script language="JavaScript" type="text/javascript">
<!--
// bbCode control by
// subBlue design
// www.subBlue.com
// modifié par flanders

// Startup variables
var imageTag = false;
var theSelection = false;

// Check for Browser & Platform for PC & IE specific bits
// More details from: http://www.mozilla.org/docs/web-developer/sniffer/browser_type.html
var clientPC = navigator.userAgent.toLowerCase(); // Get client info
var clientVer = parseInt(navigator.appVersion); // Get browser version

var is_ie = ((clientPC.indexOf("msie") != -1) && (clientPC.indexOf("opera") == -1));
var is_nav  = ((clientPC.indexOf('mozilla')!=-1) && (clientPC.indexOf('spoofer')==-1)
                && (clientPC.indexOf('compatible') == -1) && (clientPC.indexOf('opera')==-1)
                && (clientPC.indexOf('webtv')==-1) && (clientPC.indexOf('hotjava')==-1));

var is_win   = ((clientPC.indexOf("win")!=-1) || (clientPC.indexOf("16bit") != -1));
var is_mac    = (clientPC.indexOf("mac")!=-1);


// Helpline messages
b_help = "Texte en gras: <b>texte</b>  (alt+b)";
i_help = "Texte en italic: <i>texte</i>  (alt+i)";
u_help = "Texte souligné: <u>texte</u>  (alt+u)";
q_help = "Référence: <quote>texte</quote>  (alt+q)";
c_help = "Ligne code: <code>code</code>  (alt+c)";
l_help = "Liste: <list>texte</list> (alt+l)";
o_help = "LIste ordonnée: <list=>text</list>  (alt+o)";
p_help = "INsertion image: <img>http://image_url</img>  (alt+p)";
w_help = "Insertion lien: <a href='http://url'>text</a> (alt+w)";
a_help = "Ferme toutes les balises";
s_help = "Couleur: <color=red>text</color>  Astuce: Vous pouvez aussi utiliser color=#FF0000";
f_help = "Taille: <size=x-small>texte</size>";
r_help = "Pour insérer un saut de ligne: <br> (alt+r)";

// Define the bbCode tags
bbcode = new Array();
bbtags = new Array('<b>','</b>','<i>','</i>','<u>','</u>','<quote>','</quote>','<code>','</code>','<list>','</list>','<list=>','</list>','<img>','</img>','<a href=http://"url">','</a>','<br>','<br>');
imageTag = false;

// Shows the help messages in the helpline window
function helpline(help) {
	document.post.helpbox.value = eval(help + "_help");
}


// Replacement for arrayname.length property
function getarraysize(thearray) {
	for (i = 0; i < thearray.length; i++) {
		if ((thearray[i] == "undefined") || (thearray[i] == "") || (thearray[i] == null))
			return i;
		}
	return thearray.length;
}

// Replacement for arrayname.push(value) not implemented in IE until version 5.5
// Appends element to the array
function arraypush(thearray,value) {
	thearray[ getarraysize(thearray) ] = value;
}

// Replacement for arrayname.pop() not implemented in IE until version 5.5
// Removes and returns the last element of an array
function arraypop(thearray) {
	thearraysize = getarraysize(thearray);
	retval = thearray[thearraysize - 1];
	delete thearray[thearraysize - 1];
	return retval;
}


function checkForm() {

	formErrors = false;

	if (document.post.message.value.length < 2) {
		formErrors = "You must enter a message when posting.";
	}

	if (formErrors) {
		alert(formErrors);
		return false;
	} else {
		bbstyle(-1);
		//formObj.preview.disabled = true;
		//formObj.submit.disabled = true;
		return true;
	}
}


function bbfontstyle(bbopen, bbclose) {
	if ((clientVer >= 4) && is_ie && is_win) {
		theSelection = document.selection.createRange().text;
		if (!theSelection) {
			document.post.message.value += bbopen + bbclose;
			document.post.message.focus();
			return;
		}
		document.selection.createRange().text = bbopen + theSelection + bbclose;
		document.post.message.focus();
		return;
	} else {
		document.post.message.value += bbopen + bbclose;
		document.post.message.focus();
		return;
	}
	storeCaret(document.post.message);
}


function bbstyle(bbnumber) {

	donotinsert = false;
	theSelection = false;
	bblast = 0;

	if (bbnumber == -1) { // Close all open tags & " button names
		while (bbcode[0]) {
			butnumber = arraypop(bbcode) - 1;
			document.post.message.value += bbtags[butnumber + 1];
			buttext = eval('document.post.addbbcode' + butnumber + '.value');
			eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
		}
		imageTag = false; // All tags are closed including image tags :D
		document.post.message.focus();
		return;
	}

	if ((clientVer >= 4) && is_ie && is_win)
		theSelection = document.selection.createRange().text; // Get text selection

	if (theSelection) {
		// Add tags around selection
		document.selection.createRange().text = bbtags[bbnumber] + theSelection + bbtags[bbnumber+1];
		document.post.message.focus();
		theSelection = '';
		return;
	}

	// Find last occurance of an open tag the same as the one just clicked
	for (i = 0; i < bbcode.length; i++) {
		if (bbcode[i] == bbnumber+1) {
			bblast = i;
			donotinsert = true;
		}
	}

	if (donotinsert) {		// Close all open tags up to the one just clicked & default button names
		while (bbcode[bblast]) {
				butnumber = arraypop(bbcode) - 1;
				document.post.message.value += bbtags[butnumber + 1];
				buttext = eval('document.post.addbbcode' + butnumber + '.value');
				eval('document.post.addbbcode' + butnumber + '.value ="' + buttext.substr(0,(buttext.length - 1)) + '"');
				imageTag = false;
			}
			document.post.message.focus();
			return;
	} else { // Open tags

		if (imageTag && (bbnumber != 14)) {		// Close image tag before adding another
			document.post.message.value += bbtags[15];
			lastValue = arraypop(bbcode) - 1;	// Remove the close image tag from the list
			document.post.addbbcode14.value = "Img";	// Return button back to normal state
			imageTag = false;
		}

		// Open tag
		document.post.message.value += bbtags[bbnumber];
		if ((bbnumber == 14) && (imageTag == false)) imageTag = 1; // Check to stop additional tags after an unclosed image tag
		arraypush(bbcode,bbnumber+1);
		eval('document.post.addbbcode'+bbnumber+'.value += "*"');
		document.post.message.focus();
		return;
	}
	storeCaret(document.post.message);
}

// Insert at Claret position. Code from
// http://www.faqts.com/knowledge_base/view.phtml/aid/1052/fid/130
function storeCaret(textEl) {
	if (textEl.createTextRange) textEl.caretPos = document.selection.createRange().duplicate();
}

//-->
</script>

<?
if (isset($_POST['voir'])):
	$message=$_POST['message'];
	echo "$message";
	
else:
	echo "Pas de message à pré-visualiser";
	$message='Veuillez remplir le texte ici.';
endif;

?>

<form action="test.php" method="post" name="post" onsubmit="return checkForm(this)">


<table border="0" cellpadding="3" cellspacing="1" width="100%" class="forumline"><tr>
<th class="thHead" colspan="2" height="25"><b>Ecrire un nouveau sujet</b></th></tr>
<tr><td class="row1" width="22%"><span class="gen"><b>Sujet</b></span></td><td class="row2" width="78%"> <span class="gen"><input type="text" name="subject" size="45" maxlength="60" style="width:510px" tabindex="2" class="post" value="" /></span></td></tr>
<tr><td class="row1" valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="1"><tr><td><span class="gen"><b>Mise en forme du message</b></span></td></tr>
<tr><td><table width="80" border="0" cellspacing="0" cellpadding="5"></table></td></table></tr>
<td class="row2" valign="top"><span class="gen"> <span class="genmed"> </span>

<table width="530"  cellspacing="0" cellpadding="2"><tr align="center" valign="middle">

<td><span class="genmed"><input type="button" class="button" accesskey="b" name="addbbcode0" value=" B " style="font-weight:bold; width: 30px" onClick="bbstyle(0)" onMouseOver="helpline('b')" /></span></td><td><span class="genmed">

	<input type="button" class="button" accesskey="i" name="addbbcode2" value=" i " style="font-style:italic; width: 30px" onClick="bbstyle(2)" onMouseOver="helpline('i')" /></span></td><td><span class="genmed">
	<input type="button" class="button" accesskey="u" name="addbbcode4" value=" u " style="text-decoration: underline; width: 30px" onClick="bbstyle(4)" onMouseOver="helpline('u')" /></span></td><td><span class="genmed">
	<input type="button" class="button" accesskey="q" name="addbbcode6" value="Quote" style="width: 50px" onClick="bbstyle(6)" onMouseOver="helpline('q')" /></span></td><td><span class="genmed">
	<input type="button" class="button" accesskey="c" name="addbbcode8" value="Code" style="width: 40px" onClick="bbstyle(8)" onMouseOver="helpline('c')" /></span></td><td><span class="genmed">
	<input type="button" class="button" accesskey="l" name="addbbcode10" value="List" style="width: 40px" onClick="bbstyle(10)" onMouseOver="helpline('l')" /></span></td><td><span class="genmed">
	<input type="button" class="button" accesskey="o" name="addbbcode12" value="List=" style="width: 40px" onClick="bbstyle(12)" onMouseOver="helpline('o')" /></span></td><td><span class="genmed">
	<input type="button" class="button" accesskey="p" name="addbbcode14" value="Img" style="width: 40px"  onClick="bbstyle(14)" onMouseOver="helpline('p')" /></span></td><td><span class="genmed">
	<input type="button" class="button" accesskey="w" name="addbbcode16" value="URL" style="text-decoration: underline; width: 40px" onClick="bbstyle(16)" onMouseOver="helpline('w')" /></span>
	<input type="button" class="button" accesskey="r" name="addbbcode16" value="Retour" style="width: 60px" onClick="bbstyle(18)" onMouseOver="helpline('r')" /></span></td></tr><tr>

<td colspan="9"><table width="100%" border="0" cellspacing="0" cellpadding="0"><tr><td><span class="gensmall"> &nbsp;Couleur: <select name="addbbcode18" onChange="bbfontstyle('<font color=' + this.form.addbbcode18.options[this.form.addbbcode18.selectedIndex].value + '>', '</font color>')" onMouseOver="helpline('s')"><option style="color:black; background-color: #FAFAFA" value="#444444" class="genmed">Défaut</option>
	<option style="color:darkred; background-color: #FAFAFA" value="darkred" class="genmed">Rouge Foncé</option>
	<option style="color:red; background-color: #FAFAFA" value="red" class="genmed">Rouge</option>
	<option style="color:orange; background-color: #FAFAFA" value="orange" class="genmed">Orange</option>
	<option style="color:brown; background-color: #FAFAFA" value="brown" class="genmed">Marron</option>
	<option style="color:yellow; background-color: #FAFAFA" value="yellow" class="genmed">Jaune</option>
	<option style="color:green; background-color: #FAFAFA" value="green" class="genmed">Vert</option>
	<option style="color:olive; background-color: #FAFAFA" value="olive" class="genmed">Olive</option>
	<option style="color:cyan; background-color: #FAFAFA" value="cyan" class="genmed">Cyan</option>
	<option style="color:blue; background-color: #FAFAFA" value="blue" class="genmed">Bleu</option>
	<option style="color:darkblue; background-color: #FAFAFA" value="darkblue" class="genmed">Bleu Nuit</option>
	<option style="color:indigo; background-color: #FAFAFA" value="indigo" class="genmed">Indigo</option>
	<option style="color:violet; background-color: #FAFAFA" value="violet" class="genmed">Violet</option>
	<option style="color:white; background-color: #FAFAFA" value="white" class="genmed">Blanc</option>
	<option style="color:black; background-color: #FAFAFA" value="black" class="genmed">Noir</option>
</select>
&nbsp;Taille:

<select name="addbbcode20" onChange="bbfontstyle('<font size=' + this.form.addbbcode20.options[this.form.addbbcode20.selectedIndex].value + '>', '</font size>')" onMouseOver="helpline('f')">
	<option value="7" class="genmed"> Très Petite (7)</option>
	<option value="9" class="genmed">Petite (9)</option>
	<option value="12" selected class="genmed">Normale (12)</option>
	<option value="16" class="genmed">Grande (16)</option>
	<option  value="20" class="genmed">Très grande (20)</option></select></span></td>

<td nowrap><a href="javascript:bbstyle(-1)" class="gensmall" onMouseOver="helpline('a')">Fermer la balise</a></td></tr></table></td></tr>
<tr><td colspan="9"> <span class="gensmall">
<input type="text" name="helpbox" size="45" maxlength="100" style="width:510px; font-size:10px" class="helpline" value="Astuce: La mise en forme peut être appliquée rapidement en séléctionnant le texte" /></span></td>
</tr><tr><td colspan="9"><span class="gen">


<textarea name="message" rows="15" cols="35" wrap="virtual" style="width:510px" tabindex="3" class="post" onselect="storeCaret(this);" onclick="storeCaret(this);" onkeyup="storeCaret(this);">
<?
echo "$message";
?></textarea>
</span></td></tr></table></span></td></tr>

<tr><td></td><td class="catBottom" colspan="1" align="left" height="28">
<input type="hidden" name="mode" value="newtopic"></input>
<input type="hidden" name="f" value="1"></input>
<input type="submit" tabindex="5" name="voir" class="mainoption" value="Pré-visualiser"></input>
&nbsp;<input type="submit" accesskey="s" tabindex="6" name="post" class="mainoption" value="Valider"></input>
</td></tr>
</table>

</form>

par fggdm » 09 juil. 2005, 12:59

Salut,

A mon humble avis, va falloir un peu plus qu'un bout ! Peut-être deux ou trois ! Le plus dur c'est de savoir par quel bout commencer.

Editeur post

par Flanders » 09 juil. 2005, 11:44

Bonjour à tous

Je suis à la recherche d'un bout de script... mais je n'arrive pas à mettre la main dessus et encore moins à l'imager!

J'aimerai créer un éditeur de texte en ligne avec insertion des balises types d'HTML. Le texte sera stocké dans une table sql, sous forme de variable, pour pouvoir être inséré dans une page php.

Typiquement c'est l'éditeur que l'on retrouve dans les forums (dont celui-ci).

merci
@+