Par Etienne à 18h53 :
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
Par Patrice à 19h44 :
Bonsoir Etienne,
Bizarre, ça ressemble à une erreur jQuery avec le $
Vous avez un exemple en ligne ?
Par Etienne à 00h23 :
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
<!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'=>'', 'tag2'=>'');
$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'=>'', 'tag2'=>'');
$tag['bold'] = array('id'=>'bbcode3', 'title'=>'Gras', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['italic'] = array('id'=>'bbcode4', 'title'=>'Italique', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['underline'] = array('id'=>'bbcode5', 'title'=>'Souligné', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['stroke'] = array('id'=>'bbcode6', 'title'=>'Barré', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['sup'] = array('id'=>'bbcode7', 'title'=>'Exposant', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['sub'] = array('id'=>'bbcode8', 'title'=>'Indice', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['left'] = array('id'=>'bbcode9', 'title'=>'Aligné à gauche', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['right'] = array('id'=>'bbcode10', 'title'=>'Aligné à droite', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['center'] = array('id'=>'bbcode11', 'title'=>'Centrer', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['justify'] = array('id'=>'bbcode12', 'title'=>'Justifier', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['img'] = array('id'=>'bbcode13', 'title'=>'Image', 'type'=>'button', 'tag1'=>'
');
$tag['video'] = array('id'=>'bbcode18', 'title'=>'Vidéo', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['url'] = array('id'=>'bbcode14', 'title'=>'Url', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['email'] = array('id'=>'bbcode16', 'title'=>'Email', 'type'=>'button', 'tag1'=>'', 'tag2'=>'');
$tag['code'] = array('id'=>'bbcode15', 'title'=>'Code', 'type'=>'button', 'tag1'=>'', 'tag2'=>'
');
$tag['quote'] = array('id'=>'bbcode17', 'title'=>'Citation', 'type'=>'button', 'tag1'=>'', 'tag2'=>'
');
// 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>
Par Patrice à 23h21 :
Bonsoir Etienne,
Le principe est le suivant :
BBCodeGetEditor 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 BBCode2Html.
Le mieux est d'enregistrer ces deux fonctions dans un fichiers php.
Par Marc à 20h33 :
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.
Par Marc à 21h20 :
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.
Par Patrice à 23h04 :
Bonsoir Marc,
Bien vu, il y avait effectivement un problème. J'ai corrigé ça ;-)
Par Neiwa à 17h19 :
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:
<?php
echo BBCodeGetEditor('message', '', array('fontsize', 'color', 'bold', 'italic', 'underline', 'br', 'left', 'center', 'right'));
echo '</BR>';
?>
<input type="submit" name="valider" value="Poster">
if(isset($_POST['valider'])){
if(!empty($_POST['message'])){
echo $_POST['message'];
}
}Par Neiwa à 22h43 :
Re-bonjour, problème résolu ! J'avais oublié les balises form ^^
Par Patrice à 09h29 :
Bonjour Neiwa,
Oui ça fonctionne mieux si c'est dans un formulaire ^_^
Bonne intégration !
Par Etienne à 23h38 :
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)?
Par bach à 22h39 :
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
Par Patrice à 23h51 :
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()
Par bach à 08h14 :
bonjour et merci pour la réponse rapide
voila mon formulaire j'aimerai votre aide pour la plcer la fonction
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>";Par Patrice à 08h40 :
À 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.
Par bach à 09h58 :
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
Par bach à 10h26 :
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 ???
// 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 />";
}Par Patrice à 17h55 :
À la place de :
nl2br(htmlentities(trim($data['texte_news'])))
Il faut :
BBCode2Html($data['texte_news']);
Par bach à 22h06 :
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
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> </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>";
}Par Patrice à 22h25 :
Où est l'appelle à la fonction BBCode2Html ?
C'est ele qui converti le BBCode en HTML.
Pas d'appel, pas de conversion.
Par bach à 22h30 :
Ok c'est bon tous fonctionnent merci beaucoup.
Par bach à 10h18 :
Bonjour
J'ai ajouté la fonction VidProviderUrl2Player, [video]la vidéo ne fonctionne pas, faut-il faire autre chose ?
Merci encore
Par Patrice à 10h39 :
Non il ne faut rien de plus. La fonction est à porté lors de l'affichage ?
Par Destiny à 22h03 :
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.
Par Patrice à 21h39 :
Bonjour Destiny,
Oui, n'hésitez pas à poser vos questions.
Vous devez intégrer les deux fonctions PHP BBCodeGetEditor pour afficher l'éditeur et BBCode2Html pour convertir du BBCode en HTML
Par gj à 13h10 :
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
Par Patrice à 13h57 :
Bonjour gj,
Effectivement mieux vaut mettre les guillemets :-)