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.

Ajouter votre commentaire

Votre adresse ne sera pas affichée.

Elle sert à vous envoyer une notification.

 

Image Viewer