L'éditeur JavaScript
Visiteur non-identifié | Identifiez-vous | Devenir membre
Code perdu ? | Combien de visiteurs sur votre site ?
Rechercher :
Page d'accueil
     Home Page

JavaScript
     Tous les scripts
     Proposer un script
     Recherche de script
     AJAX
     Cours de JavaScript
     Liste de discussion
     Forums

Services :
     CountUs
     myCircle
     ClickInText
     XooIt

Trucs et astuces :
     HTML / CSS
     PHP / MySQL
     Réferencement
     Graph / Présentation
     Toutes les astuces
     Ajouter un article

MailingList :
113637 abonnés

Annuaire webmaster :      Hebergement web
     Referencement
     Sites webmasters
     XHTML - CSS2
     PHP
     Affiliation - Pub
     FAI

     Annuaire webmaster

Ressources pour webmasters :
     Kit graphique
     Foire aux questions
     Les membres
     Devenir annonceur
     Faire un lien
     Contact

Partenaire :
     Compteur live
     Créer un forum
     Le PHP facile
     Comscripts
     Liens sponsorisés
     Page Rank
     Gifs animés, f...
     Le village de ...
     Easy-script.com
     Poésie et cita...
     Les kits graph...
     La cuisine de ...
     Azote.org - no...
     Web creation ...
     Créer son site...
     Electroniq...
     Les autres
     Votre site ici ?


BBcode !

Script posté par :

@ NBF
Vous aussi, postez vos scripts en cliquant ici.


Description

Facile à utiliser, ce script insère du BBcode aux endroits appropriés demandés et voulus par l'utilisateur.


Compatibilité :

 FireFox : Toutes versions
 Mozilla : 1 et +
 Netscape Navigator : 1 et +
 Internet Explorer : 1 et +


Chiffres :

Date de création : 4/01/2005
Dernière modif : 3/02/2005
Visites de la page : 44538
Envois par mail : 574


Dernière modification du script :

Le 3/02/2005 : Les retours à la ligne ne posent plus de problème de positionement du curseur pour IE
>> Voir toutes les modifications effectuées sur ce script.


Exemple :





Le code :

Entre <HEAD> et </HEAD> :


Entre <BODY> et </BODY> :


Services email :

Je désire recevoir ce script par email
Je désire recevoir un email en cas de modification de ce script
Je désire m'abonner à la newsletter de l'éditeur JavaScript


Les annotations des visiteurs :

De KevBrok - le 06-01-2005
Pas mal mais sur IE ça marche juste sur la prmière ligne si tu est sur un autre ligne, ça met le curseur n'importe ou :S
De NoPseudo38 - le 15-01-2005
strlen() dans du javascript ?!?
:)
De pataouet - le 20-01-2005
J'ai fait un petit ajout pour prendre en compte les retours chariots sous IE.

Je vous mets juste la partie à modifier :

//[...]
oField.value = orig.substr(0,i) + "[" + selec+ "][/" + selec + "]" + orig.substr(i, oField.value.length);

//Partie modifiée

//Gestion des retours chariots sous IE
var temp = orig.substr(0,i);
var nbretour =0;
for (var cpt=0;cpt<temp.length;cpt=cpt+1)
{
if(temp.charAt(cpt)=="\n")
{
nbretour=nbretour+1;
}
}
//Prise en compte des retour chariots dans le placement du curseur
pos = i + 2 + selec.length - nbretour;

//Fin de la modif

//placer(document.forms['news'].elements['newst'], pos);
var r = oField.createTextRange();
//[...]
De toph_sic - le 02-02-2005
Le script ne fonctionne pas parfaitement sous netscape mais c'est ce que je cherchais. Merci bien
De htmlnavigat - le 08-06-2005
comment faire pour y mettre des couleurs?

MERCI D AVANCE
De jiop55 - le 20-08-2005
lol ya pas pour les couleurs...
De Pyrah - le 07-05-2006
Voilà j'ai eu aussi la légère erreur sous netscape, que j'ai réussi à corriger.
J'ai aussi créer trois autes fonctions légérement différente une pour entrer un lien ou une couleur, une pour rentrer une image et une pour supprimer toute mise en forme du texte.
Le script est le suivant :
dans le HEAD, les trois fonctions javascript

<script language="Javascript">
function storeCaret(ao_txtfield,as_mf){
var isIE = (document.all);
if(!isIE){
//mozilla
//recuperation du txt selectionné
oField = ao_txtfield;
oFieldValue = oField.value;
deb = oField.selectionStart;
fin = oField.selectionEnd;
Deb = oFieldValue.substring( 0 , oField.selectionStart );
Fin = oFieldValue.substring( oField.selectionEnd , oField.textLength );
Sel = oFieldValue.substring( oField.selectionStart ,oField.selectionEnd );
oField.value = Deb + '[' + as_mf + "]" + Sel + "[/" + as_mf + ']' + Fin;
oField.selectionStart = Deb.length;
tmps =Deb + '[' + as_mf+']' + Sel +"[/" + as_mf + ']'
oField.selectionEnd = tmps.length+2;
oField.setSelectionRange(Deb.length+as_mf.length+2,tmps.length-as_mf.length-3);
oField.focus();
}else{
//IE
var str = document.selection.createRange().text;
if (str.length>0){
//recuperation du txt selectionné
var select = document.selection.createRange();
select.text = '[' + as_mf + ']' + str + "[/" + as_mf + ']';
select.collapse();
select.select();
}else{
ao_txtfield.focus(ao_txtfield.caretPos);
ao_txtfield.focus(ao_txtfield.value.length);
ao_txtfield.caretPos = document.selection.createRange().duplicate();
var bidon = "%~%";
var original = ao_txtfield.value;
ao_txtfield.caretPos.text = bidon;
var i = ao_txtfield.value.search(bidon);
ao_txtfield.value = original.substr(0,i) + '[' + as_mf + "][/" + as_mf + ']' + original.substr(i, ao_txtfield.value.length);
var temp = original.substr(0,i);
var nbretour =0;
for (var cpt=0;cpt<temp.length;cpt=cpt+1){
if(temp.charAt(cpt)=="\n"){
nbretour=nbretour+1;
}
}
pos = i + 2 + as_mef.length - nbretour;
var r = oField.createTextRange();
var r = ao_txtfield.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
}
}
}
De Pyrah - le 07-05-2006
2e fonction javascript

function storeCaretValue(ao_txtfield,as_mf,as_url){
var isIE = (document.all);
if(!isIE){
//mozilla
//recuperation du txt selectionné
oField = ao_txtfield;
oFieldValue = oField.value;
deb = oField.selectionStart;
fin = oField.selectionEnd;
Deb = oFieldValue.substring( 0 , oField.selectionStart );
Fin = oFieldValue.substring( oField.selectionEnd , oField.textLength );
Sel = oFieldValue.substring( oField.selectionStart ,oField.selectionEnd );
oField.value = Deb + '[' + as_mf+'='+as_url+ '*'+as_mf+']' + Sel + '[/' + as_mf + ']' + Fin;
oField.selectionStart = Deb.length;
tmps =Deb + '[' + as_mf+'=' +as_url+ '*'+as_mf+']' + Sel +'[/' + as_mf + ']';
oField.selectionEnd = tmps.length+3;
oField.setSelectionRange(Deb.length+(as_mf.length*2)+as_url.length+4,tmps.length-as_mf.length-3);
oField.focus();
}else{
//IE
var str = document.selection.createRange().text;
if (str.length>0){
//recuperation du txt selectionné
var select = document.selection.createRange();
select.text = '[' + as_mf +'='+as_url+ '*'+as_mf+']' + str + '[/' + as_mf + ']';
select.collapse();
select.select();
}else{
ao_txtfield.focus(ao_txtfield.caretPos);
ao_txtfield.focus(ao_txtfield.value.length);
ao_txtfield.caretPos = document.selection.createRange().duplicate();
var bidon = "%~%";
var original = ao_txtfield.value;
ao_txtfield.caretPos.text = bidon;
var i = ao_txtfield.value.search(bidon);
ao_txtfield.value = original.substr(0,i) + '[' + as_mf +'='+as_url+ '*'+as_mf+'][/' + as_mf + ']' + original.substr(i, ao_txtfield.value.length);
var temp = original.substr(0,i);
var nbretour =0;
for (var cpt=0;cpt<temp.length;cpt=cpt+1){
if(temp.charAt(cpt)=="\n"){
nbretour=nbretour+1;
}
}
pos = i + 2 + as_mef.length - nbretour;
var r = oField.createTextRange();
var r = ao_txtfield.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
var r = ao_txtfield.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
}
}
}
De Pyrah - le 07-05-2006
3e fonction

function storeCaretIMG(ao_txtfield,as_mf,as_url,ab_img){
var isIE = (document.all);
if(!isIE){
//mozilla
//recuperation du txt selectionné
oField = ao_txtfield;
oFieldValue = oField.value;
deb = oField.selectionStart;
fin = oField.selectionEnd;
Deb = oFieldValue.substring( 0 , oField.selectionStart );
Fin = oFieldValue.substring( oField.selectionEnd , oField.textLength );
Sel = oFieldValue.substring( oField.selectionStart ,oField.selectionEnd );
oField.value = Deb + '[' + as_mf +'='+as_url+ '*]' + Sel + Fin;
tmps =Deb + '[' + as_mf +'='+as_url+ '*]';
oField.selectionStart = tmps.length;
tmps =Deb +'['+ as_mf+'='+as_url+'*]'+Sel;
oField.selectionEnd = tmps.length;
oField.setSelectionRange(Deb.length+as_mf.length+4,tmps.length);
oField.focus();
}else{
//IE
var str = document.selection.createRange().text;
if (str.length>0){
//recuperation du txt selectionné
var select = document.selection.createRange();
select.text = '[' + as_mf +'='+as_url+ '*]' + str;
select.collapse();
select.select();
}else{
ao_txtfield.focus(ao_txtfield.caretPos);
ao_txtfield.focus(ao_txtfield.value.length);
ao_txtfield.caretPos = document.selection.createRange().duplicate();
var bidon = "%~%";
var original = ao_txtfield.value;
ao_txtfield.caretPos.text = bidon;
var i = ao_txtfield.value.search(bidon);
ao_txtfield.value = original.substr(0,i) + '[' + as_mf +'='+as_url+ '*]' + original.substr(i, ao_txtfield.value.length);
var temp = original.substr(0,i);
var nbretour =0;
for (var cpt=0;cpt<temp.length;cpt=cpt+1){
if(temp.charAt(cpt)=="\n"){
nbretour=nbretour+1;
}
}
pos = i + 2 + as_mef.length - nbretour;
var r = oField.createTextRange();
var r = ao_txtfield.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
var r = ao_txtfield.createTextRange();
r.moveStart('character', pos);
r.collapse();
r.select();
}
}
}
De Pyrah - le 07-05-2006
Et la derniere fonction javascript.

function resetTxtField(ao_input){
var ls_texte = ao_input.value;
var la_ar = ls_texte.split("[u]");
var tamp="";
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar;
}
ls_texte = tamp;
tamp="";
la_ar = ls_texte.split("[/u]");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
tamp="";
la_ar = ls_texte.split("[i]");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
tamp="";
la_ar = ls_texte.split("
");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
tamp="";
la_ar = ls_texte.split("");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
tamp="";
la_ar = ls_texte.split("
");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
tamp="";
la_ar = ls_texte.split("[tab]");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
tamp="";
la_ar = ls_texte.split("[/url]");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
var tamp="";
la_ar = ls_texte.split("[/color]");
for(var i=0;i<la_ar.length;i++){
tamp+=la_ar[i];
}
ls_texte = tamp;
var tamp="";
var bfind=false;
for(var i=0;i<ls_texte.length;i++){
if(ls_texte.charAt(i)=="["&&ls_texte.charAt(i+1)=="u"&&ls_texte.charAt(i+2)=="r"&&ls_texte.charAt(i+3)=="l"){
bfind=true;
}
if(bfind){
if(ls_texte.charAt(i)=="]"){
bfind=false;
}
}else{
tamp+=ls_texte.charAt(i);
}
}
ls_texte = tamp;
var tamp="";
var bfind=false;
for(var i=0;i<ls_texte.length;i++){
if(ls_texte.charAt(i)=="["&&ls_texte.charAt(i+1)=="i"&&ls_texte.charAt(i+2)=="m"&&ls_texte.charAt(i+3)=="g"){
bfind=true;
}
if(bfind){
if(ls_texte.charAt(i)=="]"){
bfind=false;
}
}else{
tamp+=ls_texte.charAt(i);
}
}
ls_texte = tamp;
tamp="";
var bfind=false;
for(var i=0;i<ls_texte.length;i++){
if(ls_texte.charAt(i)=="["&&ls_texte.charAt(i+1)=="c"&&ls_texte.charAt(i+2)=="o"&&ls_texte.charAt(i+3)=="l"&&ls_texte.charAt(i+4)=="o"&&ls_texte.charAt(i+5)=="r"){
bfind=true;
}
if(bfind){
if(ls_texte.charAt(i)=="]"){
bfind=false;
}
}else{
tamp+=ls_texte.charAt(i);
}
}
ls_texte = tamp;
ao_input.value=ls_texte;
}
</script>
De Pyrah - le 07-05-2006

Après le body
<form action="bbedit.php" method="POST">
<div>
<input type="button" class="formbutton" value="b" style="width:50px;font-weight:bold" onClick="storeCaret(this.form.newst,'b');" />
<input type="button" class="formbutton" value="i" style="width:50px;font-style:italic" onClick="storeCaret(this.form.newst,'i');" />
<input type="button" class="formbutton" value="u" style="width:50px;text-decoration:underline" onClick="storeCaret(this.form.newst,'u');" />
<input type="button" class="formbutton" value="url" style="width:50px;" onClick="saisie = prompt('url du site','Adresse');if(saisie!=null){storeCaretValue(this.form.newst,'url',saisie);}" />
<input type="button" class="formbutton" value="img" style="width:50px;" onClick="saisie = prompt('url de votre image','Adresse');if(saisie!=null){storeCaretIMG(this.form.newst,'img',saisie,true);}" />
<input type="button" class="colorbutton1" value=" " onClick="storeCaretValue(this.form.newst,'color','#cc0000');" />
<input type="button" class="colorbutton2" value=" " onClick="storeCaretValue(this.form.newst,'color','#00cc00');" />
<input type="button" class="colorbutton3" value=" " onClick="storeCaretValue(this.form.newst,'color','#0000cc');" />
</div>
<div>
<textarea name="newst" id="newst" rows="10" wrap="virtual" cols="45"><?php echo $newss; ?></textarea>
</div>
<div>
<input type="submit" value="Mettre en forme" /><input type="button" value="Annuler mise en forme" onClick="resetTxtField(this.form.newst);" />
</div>
</form>
De Pyrah - le 07-05-2006


en php
<?php
function replaceBBCode($as_texte){
$texte = '<p>'.$as_texte.'</p>';
$search1 = array("\n");
$texte = str_replace($search1,"</p><p>",$texte);
$search1 = array("");
$search2 = array("
");
$texte = str_replace($search1,"<span class='boldtext'>",str_replace($search2,"</span>",$texte));
$search1 = array("");
$search2 = array("
");
$texte = str_replace($search1,"<span class='italictext'>",str_replace($search2,"</span>",$texte));
$search1 = array("[u]");
$search2 = array("[/u]");
$texte = str_replace($search1,"<span class='underlinetext'>",str_replace($search2,"</span>",$texte));
$search1 = array("[img=");
$search2 = array("*]");
$texte = str_replace($search1,"<img src='",str_replace($search2,"' />",$texte));
$search1 = array("");
$search3 = array("
");
$texte = str_replace($search1,"<a href='",str_replace($search2,"' target='_blank'>",str_replace($search3,"</a>",$texte)));
$search1 = array("[color=");
$search2 = array("*color]");
$search3 = array("[/color]");
$texte = str_replace($search1,"<span style='color:",str_replace($search2,"'>",str_replace($search3,"</span>",$texte)));
return $texte;
}
if(isset($_POST["newst"])){
$newss = $_POST["newst"];
echo replaceBBCode($newss);
}
?>

reste plus que le css a gerer puis c'est fini:D
De Pyrah - le 07-05-2006
Désolé ce fut long mais voila, maintenant bbcode avec couleur et tt et tt... sorry pour le nombre de post
De linkid - le 18-06-2006
Bonjour !
Sous IE 7, il y a un problème... lorsque l'on apuie sur entrée, sa saute 2 lignes...
Et bien que je n'utilise jamais IE, les visiteurs l'utilisent...
De NoHaR - le 20-10-2006
Alors je viens de lire tout le post, MERCI ! Je suis bien content parce que c'était exactement le type de code que je cherchais...
Par contre, ton code PHP pour la gestion du BB-code est assez moche :D , alors je me permets de proposer celui que j'ai tendance à utiliser à titre d'exemple, histoire de perfectionner :

<?php
function get_bbcode($text)
{
$text=nl2br($text);
$text = preg_replace('!\[g\](.+)\[/g\]!isU', '<strong>$1</strong>', $text);
$text = preg_replace('!\[i\](.+)\[/i\]!isU', '<em>$1</em>', $text);
$text = preg_replace('!\[s\](.+)\[/s\]!isU', '<span style="text-decoration:underline;">$1</span>', $text);
$text = preg_replace('!\[centre\](.+)\[/centre\]!isU', '<p tyle="text-align:center;margin:0px;padding:0px;">$1</p>', $text);
$text = preg_replace('!\[droite\](.+)\[/droite\]!isU', '<p style="text-align:right;margin:0px;padding:0px;">$1</p>', $text);
$text = preg_replace('!\[gauche\](.+)\[/gauche\]!isU', '<p style="text-align:left;margin:0px;padding:0px;">$1</p>', $text);
$text = preg_replace('!\[justifie\](.+)\[/justifie\]!isU', '<p style="text-align:justify;margin:0px;padding:0px;">$1</p>', $text);
$text = preg_replace('!\[titre\](.+)\[/titre\]!isU', '<h3>$1</h3>',$text);
} //etc...
?>


bon évidemment mes balises BB-code n'ont rien à voir avec ton exemple, mais c'est juste pour montrer l'utilité des Regex en PHP : tu appelles cette fonction à l'affichage du texte, juste après l'avoir loadé de ta BDD, comme ça le texte est enregistré dans la BDD en BB-code, ce qui permet que l'affichage des textes BB-codés évolue en meme temps que le design, sans rien avoir à changer... ce qui permet aussi d'éviter de mettre du html partout dans la bdd, ce qui lui donne de la portabilité, de site en site...

Bon, 'fin là je chipote, mais merci en tout cas pour ton script :D
De parsifal - le 24-06-2007
salut, je suis débutant en bbcode et php. Je voudrais utiliser ce script pour changer du contenu texte en ligne et le sauvegarder. Le nouveau texte ou le texte corrigé devrait ensuite s'afficher dans ma page. Est-ce possible avec ce script ou est-ce seulement un script de mise en forme? Merci
De eric0279 - le 18-03-2008
Bonsoir,

j'ai essayé d'insérer ce script dans un forum basé sur phpbb mais cela ne fonctionne pas...

Un peu d'aide svp :)

Merci

>> Poster une annotation sur ce script






compteur gratuit
actuellement en ligne

    PUBLICITE



     ANNUAIRE WEBMAST.
Cegetel
Fournisseur d'acces ADSL
http://www.cegetel.fr/
Cat : Haut débit
Voir l'annuaire webmaster


     LES SCRIPTS :
78 à éditer
68 à copier/coller
247 des membres
2580 sur le web
>> Tous les scripts

     LES MEMBRES :
61270 membres
7188 comptes CountUs
1719 comptes myCircle

     LES FORUMS :
14 forums
39939 topics
190882 messages
>> Les forums

    SONDAGE

Vous avez un blog ou site classique ?
Un blog
Un site classique
Les deux !
La mini-astuce "Graphisme / Présentation" du jour par caaptusss
N'hésitez pas à utiliser les figures de styles (CSS) sur votre site web ! Elles vous permettent de modifier la police et les tableaux de votre page en un coup de souris ! En effet, toutes les règles d'affichages sont réunnient dans un seul fichier ! Le rêve non ?
Proposer votre mini-astuce | Archives des mini-astuces
© 1999-2010 EJS - Tous droits réservés | CNIL N° 844440 | 14/03/2010 19:45:57 | Design by | Gen. en 0.502 sec.