Tutoriel : Masquer ou ajouter des raccourcis dans le porte-plume

Préalable

Ce tutoriel nécessite de passer par un plugin. Dans cet article, il faut donc remplacer le terme prefixe, dans les exemples suivants, par le préfixe de votre plugin.

Les pipelines

Comme le précise la documentation, il existe 2 pipelines qui permettent de manipuler les boutons d’une barre d’outil existante :

• porte_plume_barre_charger sert à afficher ou masquer certains boutons
• porte_plume_barre_pre_charger sert à ajouter des boutons à une barre

Il faudra donc déclarer ces pipelines dans paquet.xml en ajoutant :

<pipeline nom="porte_plume_barre_charger" inclure="prefixe_pipelines.php" />
<pipeline nom="porte_plume_barre_pre_charger" inclure="prefixe_pipelines.php" />

Il faudra également créer un fichier prefixe_pipelines.php à la racine de votre plugin pour y ajouter les codes suivants.

Masquer certains raccourcis

Pour simplifier le barre d’édition du porte-plume de SPIP, il est possible de cacher certains raccourcis à partir de leurs classes.

Exemple : le bouton permettant d’ajouter des notes a la classe outil_notes, il faut donc utiliser notes.

Ajouter dans le fichier prefixe_pipelines.php

function prefixe_porte_plume_barre_charger($barres) {
	$barre = &$barres['edition'];

	// Masquer des boutons
	$barre->cacher('notes');
	$barre->cacher('indenter');
	$barre->cacher('desindenter');
	$barre->cacher('barre_poesie');
	$barre->cacher('guillemets');
	$barre->cacher('sepCode');
	$barre->cacher('grpCode');

	return $barres;
}

Ajouter des raccourcis dans la barre d’édition

Note : Les styles CSS ne sont pas traités dans ce tutoriel, à vous de les gérer dans votre feuille de styles via les classes correspondantes. Idem pour les chaines de langues à déclarer dans votre fichier de langue.

Exemple 1 : encadrer un texte

Dans cet exemple, nous allons ajouter un raccourci <encadre> permettant d’avoir un encadré (un élément div avec une classe encadre) dans le contenu d’un article et nous allons placer le bouton après celui du lien dont la classe est outil_link.

Ajouter le bouton

// Ajouter un bouton
function prefixe_porte_plume_barre_pre_charger($barres) {
	$barre = &$barres['edition'];

	$barre->ajouterApres('link', array(
		'id' => 'encadre',
		'name' => _T('prefixe:outil_encadre'),
		'className' => 'encadre',
		'openWith' => '<encadre>',
		'closeWith' => '</encadre>',
		'display' => true,
		'selectionType' => 'line',
	));

	return $barres;
}

Ajouter le traitement

Pour que notre nouveau raccourci soit utilisable, il doit être traité par SPIP via une wheel : créer un fichier /wheels/prefixe.json (depuis SPIP 4) contenant :

{
    "encadre":{
        "_comment":"Traitement du raccourci <encadre>",
        "match":[
           "<encadre>",
           "</encadre>"
        ],
        "replace":[
           "<div class=\"encadre\"><p>",
           "</div>"
        ],
        "priority":-50,
        "if_str": "<encadre>",
        "type": "str"
     }
 }

Note : le <p> en ouverture d’encadré est nécessaire.

Exemple 2 : du gras de couleur

Dans cet exemple, nous allons ajouter un raccourci {{** ... **}} permettant d’avoir du gras de couleur (un élément strong avec une classe emphase) et nous allons placer le bouton sous celui du gras normal dont la classe est outil_bold.

Ajouter le bouton

function prefixe_porte_plume_barre_pre_charger($barres) {
	$barre = &$barres['edition'];

	$barre->set('bold', array(
		'dropMenu' => array(
			array(
				'id' => 'gras_emphase',
				'name' => _T('prefixe:outil_gras_emphase'),
				'className' => 'gras_emphase',
				'openWith' => '{{*',
				'closeWith' => '*}}',
				'display' => true,
				'selectionType' => 'word',
			),
		),
	));

	return $barres;
}

Ajouter le traitement

{
    "emphase":{
       "_comment":"Traitement du raccourci {{* ... *}}",
       "match":[
          "/\\{\\{\\*/S",
          "/\\*\\}\\}/S"
       ],
       "replace":[
          "<strong class=\"emphase\">",
          "</strong>"
       ],
       "priority":-50
    }
 }

Déclarer les wheels

Pour déclarer les wheels à SPIP, ajouter ce code à votre fichier fonctions prefixe_fonctions.php :

$GLOBALS['spip_wheels']['raccourcis'][] = 'prefix';

• Porte Plume : documentation technique
• Présentation de TextWheel