Documentation PHPBoost 3

Ajouter des options au BBCODE

Dans cet article je vais tenter de vous expliquer comment rajouter une option supplémentaire au BBCode.

Nous allons rajouter un lecteur audio HTML5 dans nos news, articles...etc via BBCode.

Déterminer le code HTML

Code simple

Pour ajouter un lecteur audio en html5 la syntaxe HTML est la suivante:

Code HTML :

<audio controls="controls">
    <source src="song.ogg" />
Votre navigateur n'est pas compatible.
</audio>

Code avancé FIXME

pour une meilleur compatibilité:

Code HTML :

<audio controls="controls">
    <source src="song.ogg" type="audio/ogg" />
    <source src="song.mp4" type="audio/mp4" />
    <source src="song.mp3" />
    <source src="song.mp3" type="audio/mp3" />
Votre navigateur n'est pas compatible.
</audio>

Déterminer la syntaxe BBCode

Syntaxe simple

il serait bon d'avoir une syntaxe du type:

Code BBCODE :

[audio]song.ogg[/audio]

Syntaxe avancée FIXME

la il faut parser les fichiers

Code BBCODE :

[audio]song.ogg,song.mp4,song.mp3[/audio]

Bon, nous voilà prêt à mettre les mains dans le bordel :miam À TABLE !!!

Intégration au noyaux

Fixé la syntaxe BBCode vers la fonction adéquat

Il va falloir ouvrir en lecture/écriture le fichier /kernel/framework/content/content_second_parser.class.php
dans la function parse() on ce positionne à la fin de la fonction qui devrait être la ligne 76 avant:

Code PHP :

import('util/url');
$this->content=Url::html_convert_root_relative2absolute($this->content,$this->path_to_root,$this->page_path);
}

Insérer ce code:

Code PHP :

if (strpos($this->content, '[audio]') !== false) {
    $this->content = preg_replace_callback('`\[audio\](.+)\[/audio\]`sU', array(&$this, '_audio_html5'), $this->content);
}

1er ligne si on trouve \[audio\] alors ligne 2
2sd ligne on défini la synatxe audio

Dans la seconde ligne (.+) ajouter un argument dans l'ordre de lecture, exemple:

Code BBCODE :

[audio](.+),(.+),(.+)[/audio]
égale à
[audio]argument 1,argument 2,argument 3[/audio]
donc à
[audio]song.ogg,song.mp4,song.mp3[/audio]

_audio_html5 correspond à notre fonction.

Ajouter la fonction de notre nouvelle syntaxe BBCode

Toujours dans /kernel/framework/content/content_second_parser.class.php
On se dirige à la fin du fichier avant:

Code PHP :

}
?>

Insérer la fonction _audio_html5:

Code PHP :

function _audio_html5($matches){
    if(!empty($matches[1])) {
        $contents='<audio controls preload="none"><source src="'.$matches[1].'" />Votre navigateur n\'est pas compatible.</audio>';
    }
    return $contents;
}

Dans la variable $contents= on défini le code HTML à insérer. Dans ce code HTML placer les arguments avec '.$matches[NUMÉRO].'.
Pour l'argument 1 '.$matches[1].' Pour le second '.$matches[2].' ....etc

Bon maintenant je dois ajouter cette option à ma barre d'édition BBCode.

Intégration dans la barre d'édition BBCode

On ouvre en lecture/écriture le /templates/default/framework/content/editor.tpl
Insérer par exemple à la ligne 322:

Code TPL :

<img src="{PATH_TO_ROOT}/templates/{THEME}/images/form/sound.png" class="bbcode_hover" {AUTH_SOUND} onclick="{DISABLED_SOUND}insertbbcode('[audio]', '[/audio]', '{FIELD}');" alt="{L_BB_SOUND}" title="{L_BB_SOUND}" />

voilà le tour est joué

++ Be Human