BBCode staat voor Bulletin Board Code en wordt gebruikt om opmaak toe te voegen aan berichten.

De zogenaamde tags worden tussen rechte haken geplaatst: [ en ].

Voor de verschillende iconen maak ik gebruik van FAMFAMFAM - Silk Icons :

Het moeilijkste moet nog komen, want de geselecteerde tekst opvragen in JavaScript is per browser verschillend.

Met dank aan Gigapad voor de oplossing, de jQuery bibliotheek is hierbij echter wel nodig.

Het BBCode menu in HTML :

De afhandeling van de buttons in JavaScript :

$(document).ready(function() {
    $("#bold").click(function(){$('#text').insertRoundCaret('b')});
    $("#italic").click(function(){$('#text').insertRoundCaret('i')});
    $("#underline").click(function(){$('#text').insertRoundCaret('u')});
    $("#strikethrough").click(function(){$('#text').insertRoundCaret('s')});
    $("#blockquote").click(function(){$('#text').insertRoundCaret('blockquote')});
});

Tip : Kijk ook eens op markItUp! voor een kant-en-klare BBCode editor.

De BBCode tags moeten nu nog omgezet worden naar HTML tags met behulp van een PHP functie bbcode2html en vice versa html2bbcode.

De HTML tags vetgedrukt 'b', schuingedrukt 'i', onderstreept 'u', en doorgestreept 's' hebben de status deprecated in de W3C standaard.

Het wordt aanbevolen CSS te gebruiken voor tekst opmaak.

Echter maak ik gebruik van HTML Purifier welke ongewenste HTML tags filtert.

Het valideren heb ik zo eenvoudig mogelijk gehouden :

$object_htmlpurifier_config = HTMLPurifier_Config::createDefault(); 

$object_htmlpurifier_config->set('HTML.Allowed','b,i,u,s,blockquote');

$object_htmlpurifier = new HTMLPurifier($object_htmlpurifier_config);