Commentaires sur l'article Editeur BBCode PHP Léger et Gratuit

Bonjour, je viens de découvrir votre blog par hasard en cherchant un éditeur bbcode à créer sois-même. J'ai essayé d'utiliser celui que vous proposer mais je n'arrive pas à le faire fonctionner, la console m'indique une erreur dans le script js : Uncaught ReferenceError: $1 is not defined
at EditorTagInsert
at HTMLSelectElement.onchange

Etienne à 18h53

Bonsoir Etienne,

Bizarre, ça ressemble à une erreur jQuery avec le $
Vous avez un exemple en ligne ?

Patrice à 19h44

Bonsoir, j'ai pu résoudre mon problème. Il s’agissait de guillemet non échappées. Cependant, je n'arrive pas à comprendre comment s'utilise votre code, surtout la fonction BBCode2Html. La variable $aTxt n'existe pas. Ci-dessus le code

[code]<!DOCTYPE html>
<html>
<head>
<title>Editeur bbcode</title>
<meta charset="utf-8">
</head>
<body>
<section>
<p>Petit éditeur léger trouvé sur <a href="https://blog.niap3d.com/fr/4,10,news-65-Editeur-BBCode-PHP-Leger-et-Gratuit.html">blog.niap3d.com</a></p>
<br />
<?php function BBCodeGetEditor($aName, $aTxt, $aButtonLst=''){

// 1- liste des balises reconnues
$tag = array();
$tag['fontsize'] = array('id'=>'bbcode1', 'title'=>'Taille', 'type'=>'select', 'option'=>[
['title'=>'Dimension', 'value'=>''],
['title'=>'10px', 'value'=>'10'],
['title'=>'11px', 'value'=>'11'],
['title'=>'12px', 'value'=>'12'],
['title'=>'14px', 'value'=>'14'],
['title'=>'16px', 'value'=>'16'],
['title'=>'18px', 'value'=>'18'],
['title'=>'20px', 'value'=>'20'],
['title'=>'24px', 'value'=>'24']
], 'tag1'=>'[size=$1]', 'tag2'=>'[/size]');
$tag['color'] = array('id'=>'bbcode2', 'title'=>'Couleur', 'type'=>'select', 'option'=>[
['title'=>'Couleur', 'value'=>''],
['title'=>'Rouge', 'value'=>'#ff0000'],
['title'=>'Vert', 'value'=>'#00ff00'],
['title'=>'Bleu', 'value'=>'#0000ff']
], 'tag1'=>'[color=$1]', 'tag2'=>'[/color]');
$tag['bold'] = array('id'=>'bbcode3', 'title'=>'Gras', 'type'=>'button', 'tag1'=>'[b]', 'tag2'=>'[/b]');
$tag['italic'] = array('id'=>'bbcode4', 'title'=>'Italique', 'type'=>'button', 'tag1'=>'[i]', 'tag2'=>'[/i]');
$tag['underline'] = array('id'=>'bbcode5', 'title'=>'Souligné', 'type'=>'button', 'tag1'=>'[u]', 'tag2'=>'[/u]');
$tag['stroke'] = array('id'=>'bbcode6', 'title'=>'Barré', 'type'=>'button', 'tag1'=>'[s]', 'tag2'=>'[/s]');
$tag['sup'] = array('id'=>'bbcode7', 'title'=>'Exposant', 'type'=>'button', 'tag1'=>'[sup]', 'tag2'=>'[/sup]');
$tag['sub'] = array('id'=>'bbcode8', 'title'=>'Indice', 'type'=>'button', 'tag1'=>'[sub]', 'tag2'=>'[/sub]');
$tag['left'] = array('id'=>'bbcode9', 'title'=>'Aligné à gauche', 'type'=>'button', 'tag1'=>'[left]', 'tag2'=>'[/left]');
$tag['right'] = array('id'=>'bbcode10', 'title'=>'Aligné à droite', 'type'=>'button', 'tag1'=>'[right]', 'tag2'=>'[/right]');
$tag['center'] = array('id'=>'bbcode11', 'title'=>'Centrer', 'type'=>'button', 'tag1'=>'[center]', 'tag2'=>'[/center]');
$tag['justify'] = array('id'=>'bbcode12', 'title'=>'Justifier', 'type'=>'button', 'tag1'=>'[justify]', 'tag2'=>'[/justify]');
$tag['img'] = array('id'=>'bbcode13', 'title'=>'Image', 'type'=>'button', 'tag1'=>'[img]', 'tag2'=>'[/img]');
$tag['video'] = array('id'=>'bbcode18', 'title'=>'Vidéo', 'type'=>'button', 'tag1'=>'[video]', 'tag2'=>'[/video]');
$tag['url'] = array('id'=>'bbcode14', 'title'=>'Url', 'type'=>'button', 'tag1'=>'[url]', 'tag2'=>'[/url]');
$tag['email'] = array('id'=>'bbcode16', 'title'=>'Email', 'type'=>'button', 'tag1'=>'[email]', 'tag2'=>'[/email]');
$tag['code'] = array('id'=>'bbcode15', 'title'=>'Code', 'type'=>'button', 'tag1'=>'[code]', 'tag2'=>'[/code]');
$tag['quote'] = array('id'=>'bbcode17', 'title'=>'Citation', 'type'=>'button', 'tag1'=>'[quote]', 'tag2'=>'[/quote]');

// 2- initialise les balises à utiliser parmi la liste aButtonLst
$tagSel = array();
if(empty($aButtonLst)){
$tagSel = $tag;

}else{
foreach($aButtonLst as $v){
if(!empty($tag[$v])) $tagSel[] = $tag[$v];
}
}

// 3- affiche les boutons choisis
$h = '<section>';
foreach($tagSel as $v){
switch($v['type']){
case 'button' :
// bouton
$h .= '<input id="'.$v['id'].'" type="button" value="'.$v['title'].'" onclick="EditorTagInsert(\''.$aName.'\', \''.$v['tag1'].'\', \''.$v['tag2'].'\', 0);" />';
break;
case 'select' :
// menu déroulant
$h .= '<select id="'.$v['id'].'" onchange="EditorTagInsert(\''.$aName.'\', \''.$v['tag1'].'\', \''.$v['tag2'].'\', this.value);">';
foreach($v['option'] as $v){
$h .= '<option value="'.$v['value'].'">'.$v['title'].'</option>';
}
$h .= '</select>';
break;
}
}
$h .= '</section><textarea id="'.$aName.'" name="'.$aName.'" rows="10" cols="60">'.$aTxt.'</textarea>';

// 4- code javascript
// ce code permet d'insérer des balises en tenant compte de la sélection.
$h .= "
<script>
//<![CDATA[
var tagLst = [];
function EditorTagInsert(aId, aTag1, aTag2, aOpt){

if(aOpt === '') return 0;

if(aOpt != 0) aTag1 = aTag1.replace(\"$1\", aOpt);

var e = document.getElementById(aId);
if(typeof(e) == 'undefined' || e == null) return 0;

var s1 = e.selectionStart;

var s2 = e.selectionEnd;

var txt = e.value;

e.value = (txt.substring(0, s1) + aTag1 + txt.substring(s1, s2) + aTag2 + txt.substring(s2, txt.length));

e.focus();
}
//]]>
</script>";
return $h;
}

function BBCode2Html($aTxt){
// 1- remplace les retour à la ligne par des balises <br />
$aTxt = nl2br($aTxt);

// 2- liste des balises BBCode
$tag = array(
'/\[b\](.*?)\[\/b\]/is',
'/\[i\](.*?)\[\/i\]/is',
'/\[u\](.*?)\[\/u\]/is',
'/\[s\](.*?)\[\/s\]/is',
'/\[sup\](.*?)\[\/sup\]/is',
'/\[sub\](.*?)\[\/sub\]/is',
'/\[size\=(.*?)\](.*?)\[\/size\]/is',
'/\[color\=(.*?)\](.*?)\[\/color\]/is',
'/\[code\](.*?)\[\/code\]/is',
'/\[quote\](.*?)\[\/quote\]/is',
'/\[quote\=(.*?)\](.*?)\[\/quote\]/is',
'/\[left](.*?)\[\/left\]/is',
'/\[right](.*?)\[\/right\]/is',
'/\[center](.*?)\[\/center\]/is',
'/\[justify](.*?)\[\/justify\]/is',
'/\[list\](.*?)\[\/list\]/is',
'/\[list=1\](.*?)\[\/list\]/is',
'/\[\*\](.*?)(\n|\r\n?)/is',
'/\[img\](.*?)\[\/img\]/is',
'/\[url\](.*?)\[\/url\]/is',
'/\[url\=(.*?)\](.*?)\[\/url\]/is',
'/\[email\](.*?)\[\/email\]/is',
'/\[email\=(.*?)\](.*?)\[\/email\]/is'
);

// 3- correspondance HTML
$h = array(
'<strong>$1</strong>',
'<em>$1</em>',
'<u>$1</u>',
'<span style="text-decoration:line-through;">$1</span>',
'<sup>$1</sup>',
'<sub>$1</sub>',
'<span style="font-size:$1px;">$2</span>',
'<span style="color:$1;">$2</span>',
'<code><pre>$1</pre></code>',
'<blockquote>$1</blockquote>',
'<blockquote><cite>$1 : </cite>$2</blockquote>',
'<div style="text-align:left;">$1</div>',
'<div style="text-align:right;">$1</div>',
'<div style="text-align:center;">$1</div>',
'<div style="text-align:justify;">$1</div>',
'<ul>$1</ul>',
'<ol>$1</ol>',
'<li>$1</li>',
'<img src="$1" />',
'<a href="$1">$1</a>',
'<a href="$1">$2</a>',
'<a href="mailto:$1">$1</a>',
'<a href="mailto:$1">$2</a>'
);


$n = 1;
while($n > 0){
$aTxt = preg_replace($tag, $h, $aTxt, -1, $n);
}


if(function_exists(VidProviderUrl2Player)) $aTxt = preg_replace_callback('/\[video\](.*?)\[\/video\]/is', 'VidProviderUrl2Player', $aTxt);

// 6- fais le ménage dans les balises restantes
return preg_replace(array('/\[(.*?)\]/is', '/\[\/(.*?)\]/is'), '', $aTxt); }
echo BBCodeGetEditor('commentaireTexte', '', array('fontsize', 'color', 'bold', 'italic', 'underline', 'br', 'left', 'center', 'right'));

echo BBCode2Html($aTxt); ?>
</body>
</html>
[/code]

Etienne à 00h23

Bonsoir Etienne,

Le principe est le suivant :
[b]BBCodeGetEditor[/b] permet d'afficher l'éditeur. L'éditeur est attaché à un champ de texte (un input ou un textarea, ça dépand du besoin) dans un formulaire.
À l'envoi du formulaire vous enregistrez le contenu du champs tel quel dans votre base de données. Vous enregistrez donc du BBCode.
Ensuite pour afficher ce BBCode dans une page HTML vous utilisez la fonction [b]BBCode2Html[/b].

Le mieux est d'enregistrer ces deux fonctions dans un fichiers php.

Patrice à 23h21

Bonjour,
Il me semble qu'il y a une erreur dans le code de la fonction BBCodeGetEditor. En effet, au niveau des ' et des ". En effet le return final et l'accolade de fermeture de la fonction sont en commentaire. Je préconise, comme j'en ai l'habitude, d'inverser tous les guillemets simples ou doubles ce qui évite d'échapper toutes les apostrophes du texte.

Marc à 20h33

Je reviens sur mon message précédent car il ne s'agit pas d'une erreur mais d'un inconvénient qui gêne la coloration syntaxique de l'éditeur de code.

Marc à 21h20

Bonsoir Marc,


Bien vu, il y avait effectivement un problème. J'ai corrigé ça ;-)

Patrice à 23h04

Bonjour,
Je viens de découvrir ton blog en cherchant comment faire du bbcode simple. Tes fonctions ont l'air super, du coup je vais les utilisées. Mais j'ai un petit problème, je n'arrive pas à récupérer le texte du textarea.
J'ai fais ceci:
[code]<?php
echo BBCodeGetEditor('message', '', array('fontsize', 'color', 'bold', 'italic', 'underline', 'br', 'left', 'center', 'right'));
echo '</BR>';
?>
<input type="submit" name="valider" value="Poster">
[/code]
Puis ceci pour le traitement :
[code]if(isset($_POST['valider'])){
if(!empty($_POST['message'])){
echo $_POST['message'];
}

}[/code]
Mais rien ne s'affiche, si tu pouvais m'aider ça serait gentil :)

Neiwa à 17h19

Re-bonjour, problème résolu ! J'avais oublié les balises form ^^

Neiwa à 22h43

Bonjour Neiwa,

Oui ça fonctionne mieux si c'est dans un formulaire ^_^

Bonne intégration !

Patrice à 09h29

Bonjour, y-a-t'il pour créer une liste à puce en cliquant sur le bouton "Liste" et en pressant la touche "entrée" pour ajouter une nouvelle puce (un peu comme sur les forum en bbcode)?

Etienne à 23h38

Bonjour
cela m’intéresse beaucoup j'aimerai un modèle d’intégration, enfin ou je dois mettre précisément la fonction, si vous voulez m'aider
Merci d'avance

bach à 22h39

Bonsoir bach,

Le mieux est d'enregistrer les fonctions (BBCodeGetEditor, BBCode2Html et éventuellement VidProviderUrl2Player) dans le même fichier puisqu'elle ont la même but => Traiter du BBCode.

BBCodeGetEditor() renvoit un code HTML avec les boutons, le champ de type textarea dans et le javascript pour insérer les tags dans la sélection.

Le code de cette fonction doit être placé dans un formulaire.
Il faut ensuite enregistrer le contenu du textarea tel quel.

Et pour convertir le BBCode en HMTL il faut utiliser la fonction BBCode2Html()

Patrice à 23h51

bonjour et merci pour la réponse rapide

voila mon formulaire j'aimerai votre aide pour la plcer la fonction
[code] echo "<form action='writenews.php' method='post' target='main' name='nnews'>";
echo "<table>";
echo "<tr>";
echo "<td align='center' class='moyenb'>Auteur : </td>";
echo "<td>";
echo "<input type='text' name='auteur' maxlength='30' size='50' value='".$aut."' />";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td align='center' class='moyenb'>Titre : </td>";
echo "<td>";
echo "<input type='text' name='titre' maxlength='50' size='50' value='".$tit."' />";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td align='center' class='moyenb'>News : </td>";
echo "<td>";
echo "<textarea name='news' cols='100' rows='10'>".$new."</textarea>";
echo "</td>";
echo "</tr>";
echo "<tr>";
echo "<td align='center'><input type='button' name='go' value='Poster la news' onclick=\"javascript:checknews(this.form)\" /></td>";
echo "</tr>";
echo "</table>";
echo "</form>";
echo "</br></br>";
echo "<form action='writenews.php' method='post' target='main' name='nnews'>";
echo "<input type ='hidden' name='newsaff' value='voir' />";
echo "<input type='button' name='go' value='Voir les news' onclick='javascript:submit()' />";
echo "</form>";[/code]
Merci

bach à 08h14

À la place de
echo "<textarea name='news' cols='100' rows='10'>".$new."</textarea>";
Vous mettez :
echo BBCodeGetEditor('news');

en paramètre vous pouvez placer un texte par défaut et définir la liste des boutons. si rien n'est spécifié tous les boutons sont affichés.

Patrice à 08h40

Ok textarea s'affiche avec les bbcode mais çà ne fonctionne pas je clique et il se passe rien, par contre la news est bien enregistrée.

Désolé je débute

bach à 09h58

C'est bon j'affiche le formulaire et les bbcodes s’insèrent,
mais à l'affichage l'url est en mode texte. mon code affichage peut etre je dois rajouter la fonction BBCode2Html ou ???
[code]// on décompose la date
sscanf($data['date'], "%4s-%2s-%2s %2s:%2s:%2s", $an, $mois, $jour, $heure, $min, $sec);
// on affiche les résultats
echo "<table border='0'width='100%'><tr valign='top'><td>";
//echo "News de : '".htmlentities(trim($data['auteur']))."'<br />";
echo "Titre : ".htmlentities(trim($data['titre']))."   ";
echo "Postée le : ".$jour."/".$mois."/".$an." à ".$heure.":".$min."<br />";
echo "News : <br />".nl2br(htmlentities(trim($data['texte_news'])));
echo "</td></tr><tr><td align='center'>*-*-*-*-*-*-*-*</td></tr></table>";
}
echo "</td></tr></table></div><br />";
}[/code]

bach à 10h26

À la place de :
nl2br(htmlentities(trim($data['texte_news'])))

Il faut :
BBCode2Html($data['texte_news']);

Patrice à 17h55

Bonsoir

les balises BBCode s'affichent, pas de remplacement par les balises HTML

peut être l’aperçu de la news faut il aussi mettre la fonction et comment
merci pour tous

[code]if ($aut == 'voir'){
echo "<center><p class='titreb'>Journal des News</p></center><br /><br />";
$hids = mysqli_query($con, "SELECT * FROM news") or die ("ERROR:" . mysqli_error($con));
echo "<table border='1' width='90%' cellpadding='0' cellspacing='0'>";
echo "<tr><td align='center' class='moyenb'>Auteur</td><td align='center' class='moyenb'>titre</td><td align='center' class='moyenb'>news</td><td>&nbsp;</td></tr>";
while ($myhid = mysqli_fetch_object($hids)) {
echo "<tr><td class='moyenb' width='200'>".$myhid->auteur."</td><td width='200'>".$myhid->titre."</td><td>".$myhid->texte_news;
echo "<form action='writenews.php' method='post' target='main' name='efface'>";
echo "<input type ='hidden' name='mode' value='delete' />";
echo "<input type='hidden' name='idn' value='".$myhid->id_news."' />";
echo "</td><td><input type='image' border='0' name='suppri' src='../img/icon_delete.gif' title='Supprimer' alt='' onclick='javascript:dele();return false' />";
echo "</form></td></tr>";
}[/code]

bach à 22h06

Où est l'appelle à la fonction BBCode2Html ?
C'est ele qui converti le BBCode en HTML.
Pas d'appel, pas de conversion.

Patrice à 22h25

Ok c'est bon tous fonctionnent merci beaucoup.

bach à 22h30

Bonjour
J'ai ajouté la fonction VidProviderUrl2Player, [video]la vidéo ne fonctionne pas, faut-il faire autre chose ?
Merci encore

bach à 10h18

Non il ne faut rien de plus. La fonction est à porté lors de l'affichage ?

Patrice à 10h39

Bonjourje viens de tomber sur votre blog en cherchant comment integrer un editeur un petit peu styliser du bbcode pouvez vous m'aider svp Merci d'avance.

Destiny à 22h03

Bonjour Destiny,

Oui, n'hésitez pas à poser vos questions.
Vous devez intégrer les deux fonctions PHP [b]BBCodeGetEditor[/b] pour afficher l'éditeur et [b]BBCode2Html[/b] pour convertir du BBCode en HTML

Patrice à 21h39

Bonjour
il y a un petit problème avec le tag video
et la function VidProviderUrl2Player
j'ai résolu ainsi
function VidProviderUrl2Player($aUrl, $aWidth=640, $aHeight=360){
$h = '';
$aUrl = $aUrl[1];
if(strpos($aUrl, ........
et

// 5- balise vidéo
if(function_exists(VidProviderUrl2Player)) $aTxt = preg_replace_callback('/\[video\](.*?)\[\/video\]/is', 'VidProviderUrl2Player', $aTxt);

en

// 5- balise vidéo
if(function_exists('VidProviderUrl2Player')) $aTxt = preg_replace_callback('/\[video\](.*?)\[\/video\]/is', 'VidProviderUrl2Player', $aTxt);

autrement fonctionne nickel

merci

gj à 13h10

Bonjour gj,

Effectivement mieux vaut mettre les guillemets :-)

Patrice à 13h57

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.