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: http://www.sygy.it/wp-content/uploads/2008/01/sygy_pack.rar) 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+=><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 src=images/smiles/$smile/></a>
<?php
}
<p></p>
<div class=code>
<a Onclick=document.<?php echo $form; ?>.<?php echo $name; ?>.value+=[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 } ?> [ /code] 4 ) Creiamo una pagina di esempio, ad esempio form.php , in questultima pagina richiameremo tutto ciò che abbiamo creato: - Richiamiamo la parte grafica, cioè la vera e propia textarea, i pulsanti del bbcode e le smiles - Applichiamo alla variabile $_POST['prova'](Prova in questo caso sarà il nome della textarea) la funzione bbcode che filtra il contenuto trasformandolo da bbcode a html. Ecco il codice:
<?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
}
?>
Come commentato su la variabile finale puo essere usata come meglio si crede. Voglio precisare che questa guida e utile solo per chi ha già una minima conoscenza del php. Se inserte questi codes nel vostro sito e siete veramente gentili mettete un link a questo blog, inoltre volevo ricordarvi che questi codici e questo sistema bbcode e stato estrapolato dal bbcode system del cms by matteoiamma : S-Cms(Versione 2.0) GRazie per lattenzione. Matteo.
Aggiungi un commento