Editeur bbcode avec visualisation en direct

Soyez le premier à donner votre avis sur cette source.

Vue 32 049 fois - Téléchargée 3 718 fois

Description

Bonjour,

Je vais pas dire que cette source est entièrement de moi, comptenu de divers coup de main
et d'un bout de code repris sur un forum modifié a ma guise...

Enfin bref, comme le dis le Titre, c'est un éditeur BBCode tout simple a mettre en place,
très pratique, vos vistieurs ne sont pas obligé d'avoir des notions de HTML pour composer un
commentaire, une news ou quelconque type de message, ça vous le savez déjà...

pour avoir un aperçus => http://bbc.shonenchat.com/bbcode.html

dans le code source, il y a quelques infos utils ;)

(PS : Je sais, c'est pas du nouveau, il exist déjà quelque éditeurs BBCode, mais cependant
pas facile a trouver ^^')

Source / Exemple :


// JavaScript Document
function initBBcode(IdName,BtnName,PrwName,Action,largeur,hauteur) {

	var InpBtn = '';
	var LabBtn = '';
	var DivBtn = '';
	
	var NamBtn = new Array('[b],/b','[u],/u','[i],/i','[s],/s','[align=left],/align','[align=center],/align','[align=right],/align','[align=justify],/align','[quote],/quote','[code],/code','[list=circle]\r\n[*],\r\n/list','[list=1]\r\n[*],\r\n/list','[list=a]\r\n[*],\r\n/list','[img],/img','[url],/url','[mail],/mail');
	var DesBtn = new Array('Gras','Souligné','Italique','Barré','Droite','Centré','Justifié','Gauche','Citation','Affichez du code','Liste à puce','Liste ordonnée','Liste alphabétique','Insérer une image','Insérer un lien','Insérer un mail');
	var ImgBtn = new Array('bold','underline','italic','strikethrough','alignleft','aligncenter','alignright','alignjustify','quote','code','bullist','numlist','alphalist','image','link','mail');
	
	var DesCol = new Array('Couleur police','Couleur fond');
	var NamCol = new Array('[color=','[bgcolor=','/color','/bgcolor');
	
	var OptCol = new Array('Défaut', 'Rouge foncé', 'Rouge', 'Orange', 'Marron', 'Jaune', 'Vert', 'Olive', 'Cyan', 'Bleu', 'Bleu foncé', 'Indigo', 'Violet','Blanc','Noir');
	var HtmCol = new Array('','darkred', 'red', 'orange', 'brown', 'yellow', 'green', 'olive', 'cyan', 'blue', 'darkblue', 'indigo', 'violet', 'white','black');
	
	var DesSize = 'Taille';
	var NamSize = new Array('[size=','/size');
	var OptSize = new Array('Défaut','Très petit','Petit','Normal','Grand','Très grand','Personnaliser');
	var HtmSize = new Array('medium','x-small','small','medium','large','x-large','12px');
	
	var DesFont = 'Police';
	var NamFont = new Array('[font=','/font');
	var OptFont = new Array('Défaut','Arial','Verdana','Century Gothic','Comic Sans MS','Courier New','Jokerman','Kristen ITC','Lucida Console');
	
	// partie de la fonction qui permet d'ajouter les balises BBcode aux textes sélectionné, ou à l'emplacement du curseur
	
	var Selection = 'try { if (document.selection) { objet.focus(); sel = document.selection.createRange(); sel.text = balise + sel.text + balise2; } else { if(objet.selectionStart==objet.selectionEnd) { if (balise=="[img]" && balise2=="/img") { var InfUrl=prompt("Entrez l\'adresse URL de botre image SVP :", ""); } else { if (balise=="[url]" && balise2=="/url") { var InfUrl=prompt("Entrez l\'adresse URL :", ""); } else { var InfUrl=""; } } var textedebut = objet.value.substring(0,objet.selectionStart); var textefin = objet.value.substring(objet.selectionEnd, objet.value.length); objet.value = textedebut + balise + InfUrl + balise2 + textefin; } else { var textedebut = objet.value.substring(0,objet.selectionStart); var textefin = objet.value.substring(objet.selectionEnd, objet.value.length); var texteSelection = objet.value.substring(objet.selectionStart, objet.selectionEnd); objet.value = textedebut + balise + texteSelection + balise2 + textefin; } } } catch(e) { alert(e); } ';
	
	// les 2 div qui vont bien => BBCode_ = Editeur ; Prev_ => Prévisu.
	
	document.write('<div id="BBCode_'+IdName+'" class="bbcode"></div><div id="Prev_'+IdName+'" class="bbcode"></div>');
	
	
	// Création du formulaire
	
	var html = '<form id="Form'+IdName+'" name="Form'+IdName+'" method="post" enctype="multipart/form-data" action="'+Action+'" onSubmit="return false;"><div id="BBCodeBouton_'+IdName+'"></div><div id="BBCodeArea_'+IdName+'"></div><div id="BBCodeSubmit_'+IdName+'"></div></form>';
	
	document.getElementById('BBCode_'+IdName).innerHTML = html;
	document.getElementById('BBCode_'+IdName).style.width = largeur+"px";
	document.getElementById('BBCode_'+IdName).align="left";
	
	
	document.getElementById('Prev_'+IdName).innerHTML = '<fieldset><legend>Prévisualisation :</legend></fieldset>';
	document.getElementById('Prev_'+IdName).style.display = "none";
	document.getElementById('Prev_'+IdName).align="left";
	
	document.getElementById('BBCodeArea_'+IdName).style.margin =  "0px 2.5px";
	
	document.getElementById('BBCodeSubmit_'+IdName).style.padding = "5px";
	
	// Ajout du textarea
	
	InpBtn = document.createElement( 'textarea' );
	InpBtn.id = IdName;
	InpBtn.name = IdName;
	InpBtn.style.height = hauteur+"px";
	InpBtn.style.width = largeur+"px";
	InpBtn.onkeyup = function() { preview(IdName); }
	InpBtn.style.width = largeur - 10 + "px";
	
	document.getElementById('BBCodeArea_'+IdName).appendChild(InpBtn);
	
	// Ajout des Submit de prévisu et d'envoie
	
	InpBtn = document.createElement( 'input' );
	InpBtn.type = "submit";
	InpBtn.id = "Sub"+IdName;
	InpBtn.name = "Sub"+IdName;
	InpBtn.value = BtnName;
	InpBtn.onclick = function() { 
				document.getElementById(IdName).value = preview(IdName);
				eval("document.Form"+IdName+".submit();");
				}
	
	document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
	
	// Input invisible si "off" on envoie sur la page destinatrice
	
	InpBtn = document.createElement( 'input' );
	InpBtn.type = "hidden";
	InpBtn.id = "Hid"+IdName;
	InpBtn.name = "Hid"+IdName;
	InpBtn.value = "off";
	
	document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);

	// Bouton de prévisue
	
	InpBtn = document.createElement( 'input' );
	InpBtn.type = "submit";
	InpBtn.id = "Prw"+IdName;
	InpBtn.name = "Prw"+IdName;
	InpBtn.value = PrwName;
	
	InpBtn.onclick = function() { document.getElementById('Prev_'+IdName).style.display = "block"; 
								  var texte = preview(IdName); 
								  document.getElementById('Prev_'+IdName).innerHTML = '<fieldset><legend>Prévisualisation :</legend>'+texte+'</fieldset>'; }
	
	document.getElementById('BBCodeSubmit_'+IdName).appendChild(InpBtn);
	
	
	// Le plus facile et plus simple, les balises de [b],/b à [url],/url
	
	DivBtn = document.createElement( 'div' );
	DivBtn.id = "SubBB_"+IdName;
	
	var i = 0;
	
	while (NamBtn[i]) {
			
			LabBtn = document.createElement( 'label' );
			LabBtn.title = DesBtn[i];
			
			InpBtn = document.createElement( 'input' );
			InpBtn.align = "middle";
			InpBtn.type = 'image';
			InpBtn.src = 'image/'+ImgBtn[i]+'.gif';
			
			var val = NamBtn[i].split(',');
			InpBtn.name = val[0];
			InpBtn.id = val[1];
			
			InpBtn.onclick = function() {
			
					var objet = eval("document.Form"+IdName+"."+IdName+";");
					var balise = this.name;
					var balise2 = this.id;
					
					eval(Selection);
					preview(IdName);
			}
			
			LabBtn.appendChild(InpBtn);
			DivBtn.appendChild(LabBtn);
			
			i++;
			
	}
	
	document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
	
	// on complique un peux, les Balises [color],[bgcolor]
	
	DivBtn = document.createElement( 'div' );
	DivBtn.id = "SelColBB_"+IdName;
	
	for (var i = 0;i < 2; i++) {
		
		LabBtn = document.createElement( 'label' );
		LabBtn.title = DesCol[i];
		
		LabBtn.innerHTML = "&nbsp;"+DesCol[i]+" : ";
		InpBtn = document.createElement( 'select' );
		InpBtn.id=NamCol[i];
		InpBtn.name=NamCol[i+2];
		
		var j = 0;
		
		while (OptCol[j]) {
		
			InpBtn.options[j] = new Option(OptCol[j],HtmCol[j]);
			if (i==0) { 
				InpBtn.options[j].style.color = HtmCol[j];
			} else {
				InpBtn.options[j].style.background = HtmCol[j];
			}
			
			j++;
			
		}
		
		InpBtn.onchange =  function() {
					
					var objet = eval("document.Form"+IdName+"."+IdName+";");
					var balise = this.id+this.options[this.selectedIndex].value+']';
					var balise2 = this.name;
					
					eval(Selection);
					preview(IdName);
		}
		
		LabBtn.appendChild(InpBtn);
		DivBtn.appendChild(LabBtn);

	}
	
	document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
	
	// La Balise [font] -- Type de Police --
	
	DivBtn = document.createElement( 'div' );
	DivBtn.id = "SelFontBB_"+IdName;
	
	LabBtn = document.createElement( 'label' );
	LabBtn.title = DesFont;
	LabBtn.innerHTML = "&nbsp;"+DesFont+" : ";
	
	InpBtn = document.createElement( 'select' );
	InpBtn.id=NamFont[0];
	InpBtn.name=NamFont[1];
	
	var i = 0;
	
	while (OptFont[i]) {
		InpBtn.options[i] = new Option(OptFont[i],OptFont[i]);
		i++;
	}
	
	InpBtn.onchange =  function() {
					 
					var objet = eval("document.Form"+IdName+"."+IdName+";");
					var balise = this.id+this.options[this.selectedIndex].value+']';
					var balise2 = this.name;
					
					eval(Selection);
					preview(IdName);
	}
		
	LabBtn.appendChild(InpBtn);
	DivBtn.appendChild(LabBtn);
	
	document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
	
	// La Balise [size] -- Taille de la police de caractère --
	
	DivBtn = document.createElement( 'div' );
	DivBtn.id = "SelSizeBB_"+IdName;
	
	LabBtn = document.createElement( 'label' );
	LabBtn.title = DesSize;
	LabBtn.innerHTML = "&nbsp;"+DesSize+" : ";
	
	InpBtn = document.createElement( 'select' );
	InpBtn.id=NamSize[0];
	InpBtn.name=NamSize[1];
	
	var i = 0;
	
	while (OptSize[i]) {
		InpBtn.options[i] = new Option(OptSize[i],HtmSize[i]);

		i++;
	}
	
	InpBtn.onchange =  function() {
					
					var objet = eval("document.Form"+IdName+"."+IdName+";");
					var balise = this.id+this.options[this.selectedIndex].value+']';
					var balise2 = this.name;
					
					eval(Selection);
					preview(IdName);
	}
		
	LabBtn.appendChild(InpBtn);
	DivBtn.appendChild(LabBtn);
	
	document.getElementById('BBCodeBouton_'+IdName).appendChild(DivBtn);
	

	
}
function preview(Name) {
	
	if (document.getElementById('Prev_'+Name).style.display == "none") return false;
	
	var q1 = "<table align=center border=0 cellpadding=3 cellspacing=1 width=90%><tbody><tr><td><div align=\"left\" style=\"font-size : 11px; color: #000000;\"><b>";
	var q2 = "</b></div></td></tr><tr><td align=\"left\" style=\"font-family: Arial; font-size: 11px; color: #444444; background-color: #FAFAFA; border: #D1D7DC; border-style: solid; border-width: 1px;\">";
	var q3 =  "</td></tr></tbody></table>";
	
	var texte = document.getElementById(Name).value;
	
	texte=texte.replace(/</g, '<');
	texte=texte.replace(/>/g, '>');
		
	texte=texte.replace(/\r\n|\r|\n/g, '<br />');
	texte=texte.replace(/\[(b|u|s|i|\/b|\/u|\/s|\/i)]/g,'<$1>');
	
	texte=texte.replace(/\[color=([^\[]*)\]/mig, '<span style=\'color:$1;\'>');
	texte=texte.replace(/\[bgcolor=([^\[]*)\]/mig, '<span style=\'background-color:$1;\'>');
	texte=texte.replace(/\[font=([^\[]*)\]/mig, '<span style=\'font-family:$1;\'>');
	texte=texte.replace(/\[size=([^\[]*)\]/mig, '<span style=\'font-size:$1;\'>');
	texte=texte.replace(/\[\/(color|bgcolor|font|size)\]/gi,'</span>');
	
	texte=texte.replace(/\[align=([^\[]*)\]/mig, '<div style=\'text-align:$1;\'>');
	texte=texte.replace(/\[\/align]/gi, '</div>');
	
	texte=texte.replace(/\[code]/gi, '<div align="left" style="color:#000000;font-weight:bold; font-size: 11px;">Code :</div><div style="color:#333333;background-color:#F0F0F0;" align="left"><code lang="fr">');
	texte=texte.replace(/\[\/code]/gi, '
</div>');

texte=texte.replace(/\[quote]/gi, q1+'Citation:'+q2);
texte=texte.replace(/\[quote=([^\[]*)\]/gi, q1+'$1 a écrit :'+q2);
texte=texte.replace(/\[\/quote]/gi, q3);

texte=texte.replace(/\[url]([^\]]*)\[\/url]/mig,'<a href="$1" target="_blank">$1</a>');
texte=texte.replace(/\[url=([^\[]*)\]([^\]]*)\[\/url\]/mig, '<a href=\'$1\' target=\'_blank\'>$2</a>');
texte=texte.replace(/\[mail]([^\[]*)\[\/mail]/mig,'<a href="mailto:$1" target="_blank">$1</a>');
texte=texte.replace(/\[mail=([^\[]*)\]([^\]]*)\[\/mail\]/mig, '<a href=\'mailto:$1\' target=\'_blank\'>$2</a>');
texte=texte.replace(/\[img]([^\]]*)\[\/img]/mig,'<img src="$1" border="0" />');

texte=texte.replace(/\[list=([^\]]*)\](.+)\[\/list]/mig, '<ul type="$1">$2</ul>');
texte=texte.replace(/\[\*]([^\[]+)(?=(\[\*])|(<\/ul>))/mig, '<li>$1</li>');

texte=texte.replace(/\<br \/><\/ul>/gi, '</ul>');
texte=texte.replace(/<\/ul><br \/>/gi, '</ul>');

texte=texte.replace(/<div([^\>]*)><br \/>/gi, '<div $1>');
texte=texte.replace(/<\/div><br \/>/gi, '</div>');

texte=texte.replace(/<span([^\>]*)><br \/>/gi, '<span $1>');
texte=texte.replace(/(<\/span><br \/>|<br \/><\/span><br \/>|<br \/><\/span>)/gi, '</span>');

texte=texte.replace(/<td([^\>]*)><br \/>/gi, '<td $1>');
texte=texte.replace(/<\/table><br \/>/gi, '</table>');

texte=texte.replace(/
]*)><br \/>/gi, '<code $1>');
	texte=texte.replace(/(<\/code><br \/>|<br \/><\/code>|<br \/><\/code><br \/>)/gi, '
');

document.getElementById('Prev_'+Name).innerHTML = '<fieldset><legend>Prévisualisation :</legend>'+texte+'</fieldset>';
return (texte);
}
</code>

Conclusion :


la mise en forme de l'éditeur peut se faire via Feuille de Style (CSS) en vous basant sur les
IDs correspondant de chaque élément (tout est expliqué a peux près sur le liens ci-dessus,
voyait aussi le zip (bbcode.html) ).

Pour "installer" l'éditeur :

Entre <head> et </head> de votre page, ajoutez ceci :
<script language="javascript" type="text/javascript" src="bbcode/bbcode.js"></script>

Entre <body> et </body> insérrer :
<script language="javascript" type="text/javascript">
initBBcode('Instance','Envoyer','Prévisualiser','test.php',600,400);
</script>

'Instance' => Correspond à la variable ou sera stocké le texte
ex : document.getElementById('Instance').value , $_POST['Instance']; ...

'Envoyer' => Correspond au bouton d'envoie, c'est lui qui enverra le contenue 'Instance' a 'action.php'.
'Prévisualiser' => Correspond au bouton de Prévisu., il affichera une 'Layer/Div' avec le contenue de
'Instance', il se met a jour automatiquement a chaque changement de 'Instance'.
'test.php' => Correspond a la page et/ou url destinatrice.
600 => Largeur de l'éditeur en px.
400 => Hauteur de l'éditeur en px.

A noté que, dans le fichier test.php, après avoir récupéré le contenue de la variable, je remplace les \' et \" par ' et "
si non le contenu html de la variable ne sera pas affiché correctement.

Je prévois un peux plus tard de faire une mise en forme directement dans le textarea, et une select
pour le choix de l'éditeur (HTML ou BBCODE). Par exemple, si le navigateur est compatible avec la
version HTML et BBCODE, il aura droit a faire un choix, si non, il aura directement droit a l'éditeur
qui fonctionne et/ou qui fonctionne le mieux.

Si vous avez besoin de plus de commentaire et/ou de détails, faite m'en part, je ferrais un effort ^^

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

tyranausor
Messages postés
3544
Date d'inscription
jeudi 6 août 2009
Statut
Membre
Dernière intervention
11 janvier 2020
1
Bonjour, merci pour le code! Il faudrait que tu ajoute un peu d'explication, je ne suis pas très fort en JS et, je ne sais pas comment faire pour personnaliser l'éditeur.
Sylvercis
Messages postés
1
Date d'inscription
vendredi 23 octobre 2009
Statut
Membre
Dernière intervention
22 juillet 2012

Salut,
je doit réaliser un editeur BBcode pour mon site et cette source va bien m'avancer, le plus gros est déjà en place.
Je n'ai plus qu'à le modifier une peu pour mes besoins, je vais gagner pas mal de temps grâce à toi Vince_02.
Je n'ai mis que 8/10 parce que le code date un peu et que les corrections n'ont pas été effectué dans la source.
Mais ça reste une source très utile, Merci !!
Vince_02
Messages postés
33
Date d'inscription
dimanche 15 mai 2005
Statut
Membre
Dernière intervention
14 janvier 2016
2
Bonjour,

Pour masquer le bouton de Prévisualisation, il faudra jouer sur le CSS et son ID, l'ID du bouton est : Prw+IdName.
Au mieux, il est généré a partir de la ligne 89, jusqu'à la ligne 101.

Pour récupérer le BBCode du textarea, donc éviter la conversion en html avant l'envoie, supprimez ou commentez la ligne : 73

Puis enfin une légère correction, merci à _NICO_ :
Supprimer la ligne 267, puis a partir de la ligne 321, remplacez là par :
if (document.getElementById('Prev_'+Name).style.display == "none")
document.getElementById('Prev_'+Name).innerHTML = '<fieldset><legend>Prévisualisation :</legend>'+texte+'</fieldset>';

ce qui évitera un retour de valeur 'false' non désiré.

Et pour finir, les soucis de compatibilité avec les navigateurs d'ancienne génération, mettez simplement a jour vos navigateur, les mises a jour sont prévue pour ça ^^, le tout fonctionnera convenablement.
VicTeams
Messages postés
64
Date d'inscription
vendredi 20 janvier 2006
Statut
Membre
Dernière intervention
27 février 2011

Bonjour, y aurait il la possibilité de rajouter des émoticones dans bbcode.js ?
Merci, super job ;)
turpinus
Messages postés
1
Date d'inscription
vendredi 31 juillet 2009
Statut
Membre
Dernière intervention
31 juillet 2009

Salut,
L'orsque j'utilise les balises d'agrandissement pour le texte ça crée un bug aprés envoie. quelqun sait-il pourquoi ?

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.