Connexion
S'inscrire
Actualités
Quoi de neuf
Activités générales
Auteurs
Forums
Nouveaux messages
Rechercher un forum
Quoi de neuf
Nouveaux messages
Nouveaux messages de profil
Activités générales
Membres
Membres inscrits
Visiteurs actuels
Nouveaux messages de profil
Rechercher dans les messages des profils
Teams
Créé ton équipe
Quoi de neuf ?
Nouveaux messages
Rechercher un forum
Menu
Connexion
S'inscrire
Install the app
Install
Forums
Forums généraux
Informatique
Développement
Création d'un custom BBCODE - Tooltip
JavaScript is disabled. For a better experience, please enable JavaScript in your browser before proceeding.
Vous utilisez un navigateur non à jour ou ancien. Il ne peut pas afficher ce site ou d'autres sites correctement.
Vous devez le mettre à jour ou utiliser un
navigateur alternatif
.
Répondre à la discussion
Message
<blockquote data-quote="Mathieu ?" data-source="post: 7286396" data-attributes="member: 712193"><p style="text-align: center"><strong><span style="font-size: 22px"><span style="color: rgb(5,180,255)">X</span><span style="color: #0AB2FE">e</span><span style="color: #10B0FE">n</span><span style="color: #16AEFD">F</span><span style="color: #1CACFD">o</span><span style="color: #22AAFC">r</span><span style="color: #27A8FC">o</span> <span style="color: #33A4FB">-</span> <span style="color: #3FA0FA">D</span><span style="color: #449EF9">é</span><span style="color: #4A9CF9">v</span><span style="color: #509AF8">e</span><span style="color: #5698F8">l</span><span style="color: #5C97F7">o</span><span style="color: #6295F7">p</span><span style="color: #6793F6">p</span><span style="color: #6D91F6">e</span><span style="color: #738FF5">m</span><span style="color: #798DF5">e</span><span style="color: #7F8BF4">n</span><span style="color: #8489F4">t</span> <span style="color: #9085F3">d</span><span style="color: #9683F2">'</span><span style="color: #9C81F2">u</span><span style="color: #A17FF1">n</span> <span style="color: #AD7CF0">c</span><span style="color: #B37AF0">u</span><span style="color: #B978EF">s</span><span style="color: #BF76EF">t</span><span style="color: #C474EE">o</span><span style="color: #CA72EE">m</span> <span style="color: #D66EED">B</span><span style="color: #DC6CEC">B</span><span style="color: #E16AEC">C</span><span style="color: #E768EB">O</span><span style="color: #ED66EB">D</span><span style="color: #F364EA">E</span> </span></strong></p><p></p><p><strong><u>Pré-requis:</u></strong></p><p>XenForo en mode debug <a href="https://xenforo.com/xf2-docs/manual/config/#debug-mode" target="_blank">[fa]fa-file[/fa]</a></p><p></p><p style="text-align: center">Dans un premier temps nous allons créer la structure de notre addon via une <span style="color: rgb(41,105,176)">CLI</span>, pour ce faire on ouvre le <span style="color: rgb(65,168,95)">Terminal [fa]fa-code[/fa]</span> et nous allons a la racine de notre XenForo. Une fois cela fais il ne vous reste plus cas taper: <code>php cmd.php xf-addon:create</code> pour la suite voici une description des champs:</p> <p style="text-align: center"></p><p><strong><span style="color: rgb(41,105,176)">Enter an ID for this add-on:</span></strong> <directory_name>/<addon_name> Exemple: ForoAgency/BbCodeTooltip</p><p><strong><span style="color: rgb(41,105,176)">Enter a title:</span> </strong>addon_name Exemple: BBCODE Tooltip</p><p><strong><span style="color: rgb(41,105,176)">Enter a version ID :</span> </strong><int> Exemple: 10000</p><p><strong><span style="color: rgb(41,105,176)">Enter the version string: </span></strong><version_string> Exemple: 1.0.0</p><p><strong><span style="color: rgb(41,105,176)">Does this add-on supersede a XenForo 1 add-on? (y/n):</span> </strong>y/n Pour notre cas on mettras <strong><span style="color: rgb(65,168,95)">n</span></strong></p><p><strong><span style="color: rgb(41,105,176)">Does your add-on need a Setup file? (y/n):</span> </strong>y/n Pour notre cas on mettras<strong> <span style="color: rgb(65,168,95)">n</span></strong></p><p></p><p style="text-align: center">Une fois cela fais ouvrer votre IDE avec en dossier de projet <strong><span style="color: rgb(251,160,38)">src/addons/<directory_name>/<addon_name></span></strong> vous devriez y voir 1 fichier nommer <strong><span style="color: rgb(65,168,95)">addon.json</span></strong>.</p><p></p><p style="text-align: center">Passon maintenant a la creation de notre addon, dans un premier temps nous allons renseigner les données de notre futur BBCODE dans le panel. Pour ce faire rendez-vous dans <strong><span style="color: rgb(251,160,38)">admin.php?bb-codes/add</span></strong>. Une fois cela fais nous allons donc renseigner tout els champs utile pour notre addon:</p><p><strong><span style="color: rgb(41,105,176)">BB code tag:</span></strong> tooltip</p><p><strong><span style="color: rgb(41,105,176)">Title:</span></strong> Tooltip</p><p><strong><span style="color: rgb(41,105,176)">Description:</span> </strong>(ce que vous voulez)</p><p><strong><span style="color: rgb(41,105,176)">Replacement mode:</span></strong> PHP callback</p><p><strong><span style="color: rgb(41,105,176)">Supports option parameter:</span></strong> Pour nous sa seras <strong><span style="color: rgb(65,168,95)">Yes</span></strong> cela signifie que notre BBCODE ne peut etre utiliser que si une option est renseigner ([blabla=option])</p><p><strong><span style="color: rgb(41,105,176)">PHP callback:</span></strong> <directory_name>\<addon_name>\<class_name> :: <function_name> Pour nous sa seras:<span style="color: rgb(65,168,95)"> ForoAgency\BbCodeTooltip\Tooltip :: renderTooltip</span></p><p><strong><span style="color: rgb(41,105,176)">Editor icon:</span> </strong>Remplir uniquement si vous voulez voir un bouton apparaitre dans les options de l'editeur.</p><p><strong><span style="color: rgb(41,105,176)">Example usage:</span></strong> <code>[tooltip=Je suis dans un tooltip !]Passe ta souris sur moi ![/tooltip]</code></p><p><strong><span style="color: rgb(41,105,176)">Add-on:</span> </strong>On selection notre addon (BBCODE Tooltip)</p><p><strong><span style="color: rgb(41,105,176)">Advanced options:</span></strong> Ici vous faites comme vous voulez !</p><p></p><p style="text-align: center">Maintenant vous retourner sur votre IDE et au meme endroit que notre fichier<strong> <span style="color: rgb(251,160,38)">addon.json</span></strong> on creer un fichier PHP nommer <strong><span style="color: rgb(65,168,95)">Tooltip.php </span></strong>votre fichier devras ressembler a sa:</p><p>[CODE=php]<?php</p><p>/**</p><p>* Created by PhpStorm.</p><p>* User: marentdev</p><p>* Date: 21/03/2018</p><p>* Time: 07:30</p><p>*/</p><p></p><p>namespace ForoAgency\BbCodeTooltip; //Biensure ici vous sa seras <directory_name>\<addon_name></p><p></p><p></p><p>use XF\BbCode\Renderer\AbstractRenderer;</p><p></p><p>class Tooltip</p><p>{</p><p> public static function renderTooltip($tagChildren, $tagOption, $tag, array $options, AbstractRenderer $renderer)</p><p> {</p><p> /**</p><p> * Ici on parse tout les autres Balise BBCODE presente entre [tooltip][/tooltip] et on retourne le texte final.</p><p> */</p><p> $text = $renderer->renderSubTree($tagChildren, $options);</p><p> </p><p> /**</p><p> * Ici pour finir on retourne le resultat en html du BBCODE Tooltip en n'oubliant pas de sécuriser un minimum pour éviter les failles XSS</p><p> * $tabOption nous permet de récupérer le text insérer en option dans le BBCODE</p><p> */</p><p> return '<span data-xf-init="tooltip" title="' . \XF::escapeString($tagOption) . '">' . $text . '</span>';</p><p> }</p><p>}[/CODE]</p><p></p><p style="text-align: center">Voila il ne vous reste plus cas retourner sur votre page de creation d'un <span style="color: rgb(41,105,176)">custom BBCODE</span> et de <span style="color: rgb(65,168,95)">valider</span> ! Vous pouvez des maintenant aller tester sur un de vos topics <img src="/images/smiley-pack/dance.gif" class="smilie" loading="lazy" alt=":dance:" title="Dance :dance:" data-shortname=":dance:" /></p> <p style="text-align: center"></p> <p style="text-align: center">Pour release par la suite votre addon il vous suffie de taper la commande <code>php cmd.php xf-addon:build-release <directory_name>/<addon_name></code> pour moi sa seras donc <code>php cmd.php xf-addon:build-release ForoAgency/BbCodeTooltip</code> et voila un dossier <strong><span style="color: rgb(65,168,95)">_releases</span></strong> est alors creer a la racine de votre addon contenant l'archive zip a partager !</p> <p style="text-align: center"></p> <p style="text-align: center">Voila c'est la fin de ce petit tuto rapide mais j'espere qu'ils vous auras appris les bases d'un custom BBCODE ! <img src="/images/smiley-pack/dance.gif" class="smilie" loading="lazy" alt=":dance:" title="Dance :dance:" data-shortname=":dance:" /></p></blockquote><p></p>
[QUOTE="Mathieu ?, post: 7286396, member: 712193"] [CENTER][B][SIZE=6][COLOR='rgb(5,180,255)']X[/COLOR][COLOR='#0AB2FE']e[/COLOR][COLOR='#10B0FE']n[/COLOR][COLOR='#16AEFD']F[/COLOR][COLOR='#1CACFD']o[/COLOR][COLOR='#22AAFC']r[/COLOR][COLOR='#27A8FC']o[/COLOR] [COLOR='#33A4FB']-[/COLOR] [COLOR='#3FA0FA']D[/COLOR][COLOR='#449EF9']é[/COLOR][COLOR='#4A9CF9']v[/COLOR][COLOR='#509AF8']e[/COLOR][COLOR='#5698F8']l[/COLOR][COLOR='#5C97F7']o[/COLOR][COLOR='#6295F7']p[/COLOR][COLOR='#6793F6']p[/COLOR][COLOR='#6D91F6']e[/COLOR][COLOR='#738FF5']m[/COLOR][COLOR='#798DF5']e[/COLOR][COLOR='#7F8BF4']n[/COLOR][COLOR='#8489F4']t[/COLOR] [COLOR='#9085F3']d[/COLOR][COLOR='#9683F2']'[/COLOR][COLOR='#9C81F2']u[/COLOR][COLOR='#A17FF1']n[/COLOR] [COLOR='#AD7CF0']c[/COLOR][COLOR='#B37AF0']u[/COLOR][COLOR='#B978EF']s[/COLOR][COLOR='#BF76EF']t[/COLOR][COLOR='#C474EE']o[/COLOR][COLOR='#CA72EE']m[/COLOR] [COLOR='#D66EED']B[/COLOR][COLOR='#DC6CEC']B[/COLOR][COLOR='#E16AEC']C[/COLOR][COLOR='#E768EB']O[/COLOR][COLOR='#ED66EB']D[/COLOR][COLOR='#F364EA']E[/COLOR] [/SIZE][/B][/CENTER] [B][U]Pré-requis:[/U][/B] XenForo en mode debug [URL='https://xenforo.com/xf2-docs/manual/config/#debug-mode'][fa]fa-file[/fa][/URL] [CENTER]Dans un premier temps nous allons créer la structure de notre addon via une [COLOR='rgb(41,105,176)']CLI[/COLOR], pour ce faire on ouvre le [COLOR='rgb(65,168,95)']Terminal [fa]fa-code[/fa][/COLOR] et nous allons a la racine de notre XenForo. Une fois cela fais il ne vous reste plus cas taper: [ICODE]php cmd.php xf-addon:create[/ICODE] pour la suite voici une description des champs: [/CENTER] [B][COLOR='rgb(41,105,176)']Enter an ID for this add-on:[/COLOR][/B] <directory_name>/<addon_name> Exemple: ForoAgency/BbCodeTooltip [B][COLOR='rgb(41,105,176)']Enter a title:[/COLOR] [/B]addon_name Exemple: BBCODE Tooltip [B][COLOR='rgb(41,105,176)']Enter a version ID :[/COLOR] [/B]<int> Exemple: 10000 [B][COLOR='rgb(41,105,176)']Enter the version string: [/COLOR][/B]<version_string> Exemple: 1.0.0 [B][COLOR='rgb(41,105,176)']Does this add-on supersede a XenForo 1 add-on? (y/n):[/COLOR] [/B]y/n Pour notre cas on mettras [B][COLOR='rgb(65,168,95)']n[/COLOR] [COLOR='rgb(41,105,176)']Does your add-on need a Setup file? (y/n):[/COLOR] [/B]y/n Pour notre cas on mettras[B] [COLOR='rgb(65,168,95)']n[/COLOR][/B] [CENTER]Une fois cela fais ouvrer votre IDE avec en dossier de projet [B][COLOR='rgb(251,160,38)']src/addons/<directory_name>/<addon_name>[/COLOR][/B] vous devriez y voir 1 fichier nommer [B][COLOR='rgb(65,168,95)']addon.json[/COLOR][/B].[/CENTER] [CENTER]Passon maintenant a la creation de notre addon, dans un premier temps nous allons renseigner les données de notre futur BBCODE dans le panel. Pour ce faire rendez-vous dans [B][COLOR='rgb(251,160,38)']admin.php?bb-codes/add[/COLOR][/B]. Une fois cela fais nous allons donc renseigner tout els champs utile pour notre addon:[/CENTER] [B][COLOR='rgb(41,105,176)']BB code tag:[/COLOR][/B] tooltip [B][COLOR='rgb(41,105,176)']Title:[/COLOR][/B] Tooltip [B][COLOR='rgb(41,105,176)']Description:[/COLOR] [/B](ce que vous voulez) [B][COLOR='rgb(41,105,176)']Replacement mode:[/COLOR][/B] PHP callback [B][COLOR='rgb(41,105,176)']Supports option parameter:[/COLOR][/B] Pour nous sa seras [B][COLOR='rgb(65,168,95)']Yes[/COLOR][/B] cela signifie que notre BBCODE ne peut etre utiliser que si une option est renseigner ([blabla=option]) [B][COLOR='rgb(41,105,176)']PHP callback:[/COLOR][/B] <directory_name>\<addon_name>\<class_name> :: <function_name> Pour nous sa seras:[COLOR='rgb(65,168,95)'] ForoAgency\BbCodeTooltip\Tooltip :: renderTooltip[/COLOR] [B][COLOR='rgb(41,105,176)']Editor icon:[/COLOR] [/B]Remplir uniquement si vous voulez voir un bouton apparaitre dans les options de l'editeur. [B][COLOR='rgb(41,105,176)']Example usage:[/COLOR][/B] [ICODE][tooltip=Je suis dans un tooltip !]Passe ta souris sur moi ![/tooltip][/ICODE] [B][COLOR='rgb(41,105,176)']Add-on:[/COLOR] [/B]On selection notre addon (BBCODE Tooltip) [B][COLOR='rgb(41,105,176)']Advanced options:[/COLOR][/B] Ici vous faites comme vous voulez ! [CENTER]Maintenant vous retourner sur votre IDE et au meme endroit que notre fichier[B] [COLOR='rgb(251,160,38)']addon.json[/COLOR][/B] on creer un fichier PHP nommer [B][COLOR='rgb(65,168,95)']Tooltip.php [/COLOR][/B]votre fichier devras ressembler a sa:[/CENTER] [CODE=php]<?php /** * Created by PhpStorm. * User: marentdev * Date: 21/03/2018 * Time: 07:30 */ namespace ForoAgency\BbCodeTooltip; //Biensure ici vous sa seras <directory_name>\<addon_name> use XF\BbCode\Renderer\AbstractRenderer; class Tooltip { public static function renderTooltip($tagChildren, $tagOption, $tag, array $options, AbstractRenderer $renderer) { /** * Ici on parse tout les autres Balise BBCODE presente entre [tooltip][/tooltip] et on retourne le texte final. */ $text = $renderer->renderSubTree($tagChildren, $options); /** * Ici pour finir on retourne le resultat en html du BBCODE Tooltip en n'oubliant pas de sécuriser un minimum pour éviter les failles XSS * $tabOption nous permet de récupérer le text insérer en option dans le BBCODE */ return '<span data-xf-init="tooltip" title="' . \XF::escapeString($tagOption) . '">' . $text . '</span>'; } }[/CODE] [CENTER]Voila il ne vous reste plus cas retourner sur votre page de creation d'un [COLOR='rgb(41,105,176)']custom BBCODE[/COLOR] et de [COLOR='rgb(65,168,95)']valider[/COLOR] ! Vous pouvez des maintenant aller tester sur un de vos topics :dance: Pour release par la suite votre addon il vous suffie de taper la commande [ICODE]php cmd.php xf-addon:build-release <directory_name>/<addon_name>[/ICODE] pour moi sa seras donc [ICODE]php cmd.php xf-addon:build-release ForoAgency/BbCodeTooltip[/ICODE] et voila un dossier [B][COLOR='rgb(65,168,95)']_releases[/COLOR][/B] est alors creer a la racine de votre addon contenant l'archive zip a partager ! Voila c'est la fin de ce petit tuto rapide mais j'espere qu'ils vous auras appris les bases d'un custom BBCODE ! :dance:[/CENTER] [/QUOTE]
Insérer les citations…
Vérification
Publier la réponse
Forums
Forums généraux
Informatique
Développement
Création d'un custom BBCODE - Tooltip
Ce site utilise des cookies. En continuant à utiliser ce site, vous acceptez l'utilisation des cookies.
Acceptez
En savoir plus.…
Haut