Image de l'article Editeur BBCode PHP Léger et Gratuit

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

#1

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

#2

Par Patrice à 19h44 :

Bonsoir Etienne,

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

#3

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>

#4

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.

#5

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.

#6

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.

#7

Par Patrice à 23h04 :

Bonsoir Marc,


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

#8

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">

Puis ceci pour le traitement :
if(isset($_POST['valider'])){
if(!empty($_POST['message'])){
echo $_POST['message'];
}

}

Mais rien ne s'affiche, si tu pouvais m'aider ça serait gentil :)

#9

Par Neiwa à 22h43 :

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

#10

Par Patrice à 09h29 :

Bonjour Neiwa,

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

Bonne intégration !

#11

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)?

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.

 

Image Viewer