[phpBB 3.2.x] BBCode CodeBox

[Dakin Quelia]

» BBCode CodeBox

A l'aide de cette documentation, vous allez ajouter un nouveau BBCode Code qui garde les tabulations et espaces. Ce BBCode est axé sur la balise <pre>.

» 1. Création du fichier CSS

Tout d'abord, créez un nouveau fichier pour la CSS que l'on va nommer « bbcodes.css » (ceci peut être utile dans l'avenir si vous souhaitez personnaliser les BBCodes ou en ajouter de nouveaux). Ce fichier sera à placer dans votre style, c'est-à-dire « /styles/{VOTRE_THEME}/theme/ ».

Code : Tout sélectionner

/* BBCodes Style
--------------------------------------------- */
.codebox pre.prebox {
    color: #2E8B57;
}

.codebox pre.prebox {
    overflow: auto;
    display: block;
    height: auto;
    max-height: 200px;
    padding: 5px 5px;
    font: 0.9em Monaco, "Andale Mono","Courier New", Courier, monospace;
    line-height: normal;
    line-height: 1.3em;
}

.codebox a.selectCodeBox {
	float: right; 
	font-size: 1.3em;
}

Mais ce n'est pas tout, il faut appeler ce fichier car il ne suffit pas de créer le fichier CSS pour qu'il soit pris en compte. De ce fait, ouvrons le fichier « /styles/{VOTRE_THEME}/theme/stylesheet.css » et à la fin du fichier, ajoutez :

Code : Tout sélectionner

@import url("bbcodes.css?v=3.2");

» 2. Création du fichier JS

Ensuite, nous allons créer une fonction pour sélectionner le code de la balise étant donné que nous allons utilisé la balise <pre> et non <code>. Pour ce faire, créons un fichier que l'on nommera « bbcodes.js ». Ce fichier sera à placer dans votre style, c'est-à-dire « /styles/{VOTRE_THEME}/template/ ». Dans ce fichier, vous mettez le code ci-dessous :

Code : Tout sélectionner

/**************************************************
*	SelectCodePre()
*	Author : phpBB.com
* 	Example(s) : 
*		selectCodePre(this); return false;
**************************************************/
function selectCodePre(a) {
	'use strict';

	// Get ID of Pre block
	var e = a.parentNode.parentNode.getElementsByTagName('PRE')[0];
	var s, r;

	// Not IE and IE9+
	if (window.getSelection) {
		s = window.getSelection();
		// Safari and Chrome
		if (s.setBaseAndExtent) {
			var l = (e.innerText.length > 1) ? e.innerText.length - 1 : 1;
			try {
				s.setBaseAndExtent(e, 0, e, l);
			} catch (error) {
				r = document.createRange();
				r.selectNodeContents(e);
				s.removeAllRanges();
				s.addRange(r);
			}
		}
		// Firefox and Opera
		else {
			// workaround for bug # 42885
			if (window.opera && e.innerHTML.substring(e.innerHTML.length - 4) === '<BR>') {
				e.innerHTML = e.innerHTML + '&nbsp;';
			}

			r = document.createRange();
			r.selectNodeContents(e);
			s.removeAllRanges();
			s.addRange(r);
		}
	}
	// Some older browsers
	else if (document.getSelection) {
		s = document.getSelection();
		r = document.createRange();
		r.selectNodeContents(e);
		s.removeAllRanges();
		s.addRange(r);
	}
	// IE
	else if (document.selection) {
		r = document.body.createTextRange();
		r.moveToElementText(e);
		r.select();
	}
}

Ensuite, il faut que l'on appelle ce fichier. Pour ce faire, ouvrons le fichier « /styles/{VOTRE_THEME}/template/overall_footer.html ».

Cherchez :

Code : Tout sélectionner

<!-- EVENT overall_footer_after -->

Avant, ajoutez :

Code : Tout sélectionner

<script type="text/javascript" src="{T_TEMPLATE_PATH}/bbcodes.js"></script>

» 3. Création du BBCode CodeBox

Maintenant, nous allons créer notre BBCode via le panneau d'administration. Pour ce faire, suivez l'étape suivante.

Balise BBCode :

Code : Tout sélectionner

[codebox]{TEXT}[/codebox]

Code HTML de remplacement :

Code : Tout sélectionner

<div class="codebox">
	<p>Code: <a href="#" onclick="selectCodePre(this); return false;" class="selectCodeBox"><i class="fa fa-files-o fa-fw" aria-hidden="true"></i></a></p>
	<pre class="prebox">{TEXT}</pre>
</div>

Ligne d'aide :

Code : Tout sélectionner

Insérer une codebox (avec la balise pre) : [codebox]votre code[/codebox]

» 4. Vider le cache

Afin que vos modifications soient prises en compte, n'oubliez pas de vider le cache. Pour cela, rendez-vous dans le panneau d'administration et cliquez sur le bouton « Exécuter maintenant » en face de « Purger le cache ».

» 5. Résultat

Vous pouvez voir sur la capture d'écran ci-dessous le résultat obtenu.