jQuery plugin desoBBCode

Présentation

Ce plugin permet la mise en forme de texte grâce à la syntaxe BBCode. Il affiche également le rendu sous la zone de texte, et cela sans rafraîchissement de page.

Installation

Inclure jQuery, le plugin fieldSelection, le plugin desoBBCode et son CSS dans votre page HTML :

<link rel="stylesheet" type="text/css" href="css/jquery.desobbcode.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/fieldselection.js"></script>
<script type="text/javascript" src="js/desobbcode.js"></script>

Le plugin a seulement besoin du textarea avec lequel il sera lié.

Le plugin n’est pas prévu pour fonctionner avec plusieurs textarea sur la même page.
<form method="post" action="#">
	<textarea id="desoBBCode" rows="7" cols="84"></textarea>
</form>

Appel du plugin

Utiliser le plugin en tant que méthode du textarea.

$(document).ready(function() {
    $('#desoBBCode').desoBBCode();
});

Vous pouvez personnaliser desoBBCode() en y ajoutant certains paramètres, par exemple :

$(document).ready(function() {
	$('#desoBBCode').desoBBCode({
		firstLegend: 'Rédaction',				// label du premier fieldset								
		secondLegend: 'Visualisation',			// label du second fieldset
		viewBtn: 'Voir',						// label du bouton de visualisation
		submitBtn: 'OK',						// label du bouton de soumission
		quoteQuestion: 'Qui est l\'auteur ?',	// question lors du clic sur la balise "citation"
		urlQuestion: 'Quelle est l\'URL ?',		// question lors du clic sur la balise "lien"
		submitEvent: function(html) {			// callback de soumission du formulaire
			alert(html);
		}
	});
});

Ajouter ses balises

Le plugin a été développé pour permettre facilement la personnalisation des balises disponibles. Un fichier au format JSON est utilisé pour charger les boutons qui permettent l’inclusion du BBCode. Ce fichier se trouve dans js/jquery.desobbcode.json. L’avantage est qu’il permet aussi de modifier les valeurs des boutons, par exemple pour changer un intitulé, ou encore traduire en anglais.

Bonus

Pour un côté plus pratique, vous pouvez ajouter le plugin elastic() qui redimensionne automatiquement la hauteur du textarea en fonction de la taille de son contenu.

Rendu

Voir la démonstration

Télécharger

jQuery
jquery.desobbcode.min.js (4.4 KB) jquery.desobbcode.js (8 KB)
fieldSelection
jquery.fieldselection.js (1.2 KB)
CSS
jquery.desobbcode.min.css (1.2 KB) jquery.desobbcode.css (1.4 KB)
JSON
jquery.desobbcode.json