Le gadget Barre de luxe est un gadget JavaScript, activable par tout utilisateur enregistré dans ses préférences, qui ajoute toute une panoplie de boutons pour faciliter l’édition des pages. Il est compatible avec la barre d’outils de modification.
Il ajoute une collection de boutons pour aider la contribution. Si vous utilisez la barre d’outils de modification, ils se situent dans l’onglet « Avancé ». Si vous ne l’utilisez pas, les boutons apparaitront au-dessus de la zone d’édition.e
Image barre seule | Image barre d’outils | Action | Groupe | Caché si barre d’outils activée |
---|---|---|---|---|
Apostrophe typographique | Format | non | ||
Espace insécable | Format | non | ||
Guillemets français | Format | non | ||
- | Redirection (déjà présent dans la barre d’outils) | - | oui | |
Lien vers Wikipédia | Liens | non | ||
Message de remerciement à une IP | Messages | non | ||
Message de bienvenue | Messages | non | ||
Message d’avertissement débutant | Messages | non | ||
Message vandale | Messages | non | ||
Message vandale 2 | Messages | non | ||
Message de blocage | Messages | non | ||
Message spam | Messages | non | ||
Message spam 2 | Messages | non | ||
Message copyvio | Messages | non | ||
Message copyvio 2 | Messages | non | ||
Modèle de suppression immédiate | Bandeaux | non | ||
Bandeau de proposition de suppression | Bandeaux | non | ||
Patron d’entrée en français long | Patrons | non | ||
Patron d’entrée en français court | Patrons | non | ||
Section références | Patrons | non | ||
Modèle {{source}} | Insérer | non | ||
Modèle {{Autres projets}} | Liens | non | ||
Modèle {{refnec}} | Modèles | non | ||
Modèle {{?}} | Modèles | non |
Cochez la case suivante dans vos préférences (onglet « Gadget », section « Modification des pages ») :
Barre de luxe : ajoute des boutons pour insérer des modèles pré-remplis en un clic (pour éditer une page, avertir les débutants, etc.). Nécessite de vider le cache du navigateur. (page d’aide) (version de base) (version intégrée à la barre d’édition)
Deux type de boutons sont disponibles :
Pour ajouter des boutons, il faut vous modifier votre page Utilisateur:XXX/common.js et y insérer le code qui définira les boutons et les ajoutera :
var bdl_buttons = [
// Définition des boutons.
];
La liste indiquée par // Définition des boutons.
est l’endroit où les boutons doivent être définis.
Pour définir un bouton, il faut déclarer un objet avec les attributs suivants :
imageFileName
Le chemin de l’icone du bouton sur Commons si la barre d’outils de modification est désactivée (après « commons/ »). Taille recommandée : 23×22 pixels. Si l’extension n’est pas renseignée, le fichier sera considéré comme étant un .PNG.imageFileNameOOUI
Le chemin de l’icone du bouton sur Commons pour la barre d’outils de modification (après « commons/ »). Taille recommandée : 24×24 pixels. Optionnel si vous n’utilisez pas cette barre d’outils. S’il n’est pas défini et que vous utilisez la barre d’outils, l’image définie par imageFileName
sera utilisée à la place. Si l’extension n’est pas renseignée, le fichier sera considéré comme étant un .PNG. Les images ne sont pas redimensionnées automatiquement.tooltip
Le texte apparaissant dans l’infobulle au survol du bouton.buttonId
L’identifiant unique du bouton. Il doit n’utiliser que les 26 lettres de l’alphabet, le tiret (-) ou des chiffres.group
Le groupe de la barre d’outils de modification dans lequel ranger le bouton. Optionnel si vous n’utilisez pas cette barre d’outils. Les groupes disponibles sont :
format
: « Format »insert
: « Insérer »size
: Boutons pour modifier la taille du textelinks
: « Liens »section_templates
: « Patrons »messages
: « Messages »headers
: « Bandeaux »html_tags
: « Balises »toolbarIgnore
Si défini avec la valeur true
, le bouton ne sera pas ajouté à la barre d’outils de modification.Ce type de bouton nécessite la définition de deux autres attributs :
tagOpen
Le texte à insérer avant le texte sélectionné.tagClose
Le texte à insérer après le texte sélectionné.Exemple complet (bouton insérant une balise <includeonly>
) :
{
tagOpen: "<includeonly>",
tagClose: "</includeonly>",
imageFileName: "9/9f/Button_nowiki_symbol.png",
imageFileNameOOUI: "thumb/8/8c/OOjs_UI_icon_markup.svg/24px-OOjs_UI_icon_markup.svg.png",
tooltip: "Balises includeonly",
buttonId: "includeonly-tag",
group: "html_tags",
},
Ce type de bouton nécessite la définition de trois autres attributs :
promptText
Le texte à afficher dans le popup de saisie.promptDefault
Le valeur par défaut du champ de texte du popup de saisie.action
La fonction à exécuter après que l’utilisateur a validé le popup de saisie, qui retourne le texte qui remplacera celui sélectionné par l’utilisateur. Elle prend deux paramètres :
selectedText
Le texte sélectionné par l’utilisateur.inputText
Le texte saisi par l’utilisateur dans le popup.Exemple complet (bouton pour insérer le modèle {{pron}} dans la langue voulue) :
{
action: function (selectedText, inputText) {
return "{{pron|" + selectedText + "|" + inputText + "}}";
},
promptText: "Langue",
promptDefault: "fr",
imageFileName: "1/13/Button_API_ʃ.png",
imageFileNameOOUI: "thumb/0/0a/OOjs_UI_icon_feedback-ltr.svg/24px-OOjs_UI_icon_feedback-ltr.svg.png",
tooltip: "Prononciation",
buttonId: "pron",
group: "insert",
},
var bdl_buttons = [
{
action: function (selectedText, inputText) {
return "{{pron|" + selectedText + "|" + inputText + "}}";
},
promptText: "Langue",
promptDefault: "fr",
imageFileName: "1/13/Button_API_ʃ.png",
imageFileNameOOUI: "thumb/0/0a/OOjs_UI_icon_feedback-ltr.svg/24px-OOjs_UI_icon_feedback-ltr.svg.png",
tooltip: "Prononciation",
buttonId: "pron",
group: "insert",
},
{
tagOpen: "<includeonly>",
tagClose: "</includeonly>",
imageFileName: "9/9f/Button_nowiki_symbol.png",
imageFileNameOOUI: "thumb/8/8c/OOjs_UI_icon_markup.svg/24px-OOjs_UI_icon_markup.svg.png",
tooltip: "Balises includeonly",
buttonId: "includeonly-tag",
group: "html_tags",
},
];
L’ancienne syntaxe de définition est toujours prise en charge mais déconseillée car moins lisible.
Le bouton est défini dans un tableau plutôt que dans un objet :
Exemple complet (bouton pour insérer une redirection) :
[
"#REDIRECT[[",
"]]",
"4/47/Button_redir",
"Redirection",
"redirect",
],
→ voir Discussion MediaWiki:Gadget-Barre_de_luxe.js