Creare da zero un sistema di bbcode & smiles

Premessa & Teoria

Oggi vedremo insieme come applicare un editor html/sistema bbcode e smiles ad una semplice textarea fatta in html.
Sfrutteremo i linguaggi php e javascript.

In teoria funziona cosi’:

C’è una textarea in semplice html, il contenuto di questa textarea ci serve per qualcosa(ad esempio per inserirlo in un db mysql). Alla variabile del contenuto della textarea applichiamo la funzione php bbcode, funzione creata nella pagina bbcode.php che sostituisce ad esempio [b][/b] con <b></b> grassettando il testo e cosi’ via.

Alla textarea applichiamo anche la parte ”grafica”, cioè delle immagini che cliccando sopra fanno apparire nella textarea i nostri simboli bbcode(esempio [b])

Iniziamo e passiamo alla pratica.
————-
Pratica

1) Create una pagina di nome bbcode.php e metteteci questo codice

<?php

//CODE BY MATTEOIAMMA – WWW.MATTEOIAMMARRONE.COM

function bbcode($var){  

      $search = array(

        ’/\[b\](.*?)\[\/b\]/is’,                                

        ’/\[i\](.*?)\[\/i\]/is’,                                

        ’/\[u\](.*?)\[\/u\]/is’,

        ’/\[img\](.*?)\[\/img\]/is’,

        ’/\[url\](.*?)\[\/url\]/is’,

        ’/\[url\=(.*?)\](.*?)\[\/url\]/is’,

        ’/\[quote\](.*?)\[\/quote\]/is’,

        ’/\[youtube\](.*?)\[\/youtube\]/is’,

        ’/\[code\](.*?)\[\/code\]/is’,

        ’/\[marquee\](.*?)\[\/marquee\]/is’,

        );

    $replace = array(

        ’<strong>$1</strong>’,

        ’<em>$1</em>’,

        ’<u>$1</u>’,

        ’<img src=”$1″ />’,

        ’<a href=”$1″>$1</a>’,

        ’<a href=”$1″>$2</a>’,

        ’<div class=”forum_quote”>$1</div>’,

        ’<object classid=”clsid:D27CDB6E-AE6D-11cf-96B8-444553540000″ codebase=”http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0″>

<param name=”movie” value=”$3″ />

<param name=”quality” value=”best” />

<param name=”play” value=”true” />

<embed  pluginspage=”http://www.macromedia.com/go/getflashplayer” src=”$1″ type=”application/x-shockwave-flash”  quality=”best” play=”true”></embed> 

</object>’,

’<div class=”forum_code”>$1</div>’,

’<marquee>$1</marquee>’

        );

 

    $var = preg_replace ($search, $replace, $var);

 

//SISTEMABBCODE

 

    //SISTEMA SMILE

       $sel_smile = opendir(”smiles”);

        while($smile=readdir($sel_smile)){

$smile_value = str_replace(”.gif”, ””, $smile);

   $var_nw =  str_replace($smile_value, ”<img src=’smiles/$smile’/>”, $var);

        }

        // SYSTEMA SMILE

    return $var_nw;

    }

} ?>

2 ) Create una cartella nome smiles e mettetici un sacco di smiles in gif(Scaricate alcune smiles da qui)

3 )  Create una pagina di nome bbcode2.php(ad esempio)

function textarea($name, $value, $form){

?>

<center>

Basic:

<a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[b][/b]'”>Grassetto</a>

 

<a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[u][/u]'” >Sottolineato</a>

 

<a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[i][/i]'” >Corsivo</a>

 

<p></p></center>

<?php

echo ”

<textarea name=’$name’ rows=’8′ cols=’40’ id=’$name’>$value</textarea>”;

?>

<p></p>

<a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[img][/img]'”><b>IMMAGINE</b></a>

<a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[url=quiurl]quitesto[/url]'”><b>URL</b></a>

<a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[youtube][/youtube]'” >Youtube Video</a>

<?php

echo ”<p></p>”;

$smile_op = opendir(”smiles”);

while($smile=readdir($smileop)){ ?>

<a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[img]images/smiles/<?php echo $smile;?>[/img]'”><img src=”images/smiles/$smile”/></a>

<?php

}

<p></p>

<div class=”code”>

<a  Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[code][/code]'” >CODE</a></div>

<div class=”code”><a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[quote][/quote]'” >QUOTE</a></div>

<div class=”code”><a Onclick=”document.<?php echo $form; ?>.<?php echo $name; ?>.value+='[marquee][/marquee]'” >MARQUEE</a></div>

<?php

}
?> 

<?php

include(”bbcode.php”);

include(”bbcode2.php”);

echo ”<form action=’form.php’ method=’post’ name=’nomeform’>”;

textarea(”prova”, ”Qui contenuto di default”, ”nomeform”);

echo ”<input type=’submit’ name=’send’ value=’Invia Form’/>”;

echo ”</form>”;

if ($_POST[’send’]){

$contenuto_textarea=bbcode($_POST[’prova’]);

//FAI DI QUESTA VARIAIBLE(CONTENUTO TEXTAREA) QUELLO CHE TI PARE ADESSO IL BBCODE E’ APPLICATO E FUNZIONA, AD ESEMPIO PUOI METTERLA IN UN DB

mysql_query(”INSERT INTO tabella VALUES (’$contenuto_textarea’);”); //ESEMPIO BANALE, CODE NON OBBLIGATORIO

}

?>