Jump to content

Manuel:Boutons d'édition personnalisés

From mediawiki.org
This page is a translated version of the page Manual:Custom edit buttons and the translation is 100% complete.
Languages:
Barre d'outils de WikiEditor
Barre standard des outils d'édition

Vous pouvez ajouter des boutons personnalisés d'édition dans la barre des outils d'édition au-dessus de la fenêtre d'édition, en utiisant JavaScript (voir ci-dessous). Il faut distinguer la nouvelle barre d'outils ajoutée par Extension:WikiEditor de l'ancienne barre d'outils (connue également comme étant la barre standard).

mw.user.options.get( 'usebetatoolbar' ) peut être utilisé pour vérifier si un utilisateur utilise le wikiEditor (true) ou l'ancienne barre d'outils (false).

Ajouter JavaScript

Les boutons personnalisés utilisent JavaScript pour implémenter leur fonctionnalité. Pour que JavaScript opère sur la page d'édition il existe plusieurs manières d'appliquer le JavaScript à la page d'édition du Wiki :

  • JavaScript personnel — approprié sur un serveur pour lequel cette fonctionnalité est autorisée et pour les boutons que vous souhaitez voir chez les utilisateurs qui auront copié le JavaScript dans leur fichier JavaScript personnel.
  • Extension JavaScript — approprié si tous ou la plupart des utilisateurs du Wiki peuvent utiliser le bouton. Ceci suppose que vous développez une extension pour MediaWiki.
  • JavaScript du noyau MediaWiki — approprié si le nouveau bouton doit figurer sur toutes les installations du Wiki.

JavaScript personnel

Pour ajouter de nouveaux boutons, vous pouvez les inclure dans votre JavaScript personnel.

Dans LocalSettings.php ajoutez $wgAllowUserJs = true; ou dans Common.js ou en tant que gadget.

Extension JavaScript

Après la configuration de la structure de l'extension de base, le fichier du noyau PHP devra contenir (ou référencer indirectement, dans les extensions complexes), les deux premières étapes suivantes. Pour une extension simple, qui consisterait par exemple à ajouter simplement un bouton utilisateur, la troisième étape pourrait s'exécuter dans le fichier PHP noyau de l'extension comme dans cet exemple simple, ou bien se trouver dans un autre fichier PHP. Il peut y avoir aussi des besoins de traduction à inclure dans le fichier I18N.

Définir le paquet du Resource Loader

La meilleure méthode pour les extensions est d'exploiter l’API du Resource Loader, qui fournit une optimisation des performances et une manière standard d'accéder aux scripts. Cet exemple simple montre l'ajout d'un fichier JavaScript. 

$wgResourceModules['ext.MyExtension']['scripts'][] = 'extensions/MyExtension/js/MyExtension.js';

Référencer une accroche

L'une des accroches offerte par la page d'édition permet l'ajout d'une référence de fonction. La fonction ou la méthode référencée ici peut se trouver dans le fichier PHP principal de l'extension si l'extension est unique, ou dans un autre fichier PHP. 

$wgHooks['EditPage::showEditForm:initial'][] = 'addModule';

Définir une accroche

L' accroche de la page d'édition permet d'ajouter une référence au module du Resource Loader défini plus tôt. Ce exemple montre l'ajout sur chaque page. Il peut y avoir une logique complexe associée à l'affichage mais des conditions supplémentaires seront alors ajoutées à ce gestionnaire. L'argument de la méthode addModules est la même chaîne de caractères que celle utilisées dans l'étape de définition du paquet. 

function addModule(EditPage $editPage, OutputPage $output ) {
$output->addModules( 'ext.MyExtension' );
}

Une fois ces trois étapes réalisées, le fichier JavaScript référencé dans l'ensemble de ressources sera appliqué à chaque page à modifier. L'API permet de gérer plusieurs fichiers et possède une granularité plus fine quant au contrôle du fichier appelé.

Noyau MediaWiki

Le critère d'architecture pour l'ajout au noyau de MediaWiki dépasse ce qui est décrit ici, mais les principes pour ajouter des boutons sont expliqués.

Les fichiers JavaScript du noyau MediaWiki sont référencés dans le fichier 'resources/Resources.php' . L'archive par défaut pour la page d'édition inclut 'resources/src/mediawiki.action/mediawiki.action.edit.js'. Si le bouton doit être affiché chaque fois, ce fichier JavaScript doit être étendu avec le nouveau bouton. Si le bouton possède des conditions pour ne pas recharger le fichier JavaScript à chaque fois, les étapes similaires à celles des extensions doivent être exécutées et il faut se demander si la fonction appartient au noyau du code source MediaWiki ou si une extension n'est pas plutôt un meilleur moyen pour fournir la fonctionnalité.

Extension:WikiEditor 

jQuery( document ).ready( function ( $ ) {
    $( '#wpTextbox1' ).wikiEditor( 'addToToolbar', {
        section: 'advanced',
        group: 'format',
        tools: {
            buttonId: {
                label: 'Comment visible only for editors',
                type: 'button',
                icon: '//upload.wikimedia.org/wikipedia/commons/f/f9/Toolbaricon_regular_S_stroke.png',
                action: {
                    type: 'encapsulate',
                    options: {
                        pre: '<!-- ',
                        peri: 'Insert comment here',
                        post: ' -->'
                    }
                }
            }
        }
    } );
} );

Voir aussi la personnalisation de la barre d'outils pour les options plus avancées et les exemples.

Vous pouvez aussi utiliser le script InsertWikiEditorButton (de l'utilisateur Krinkle) pour simplifier l'ajout de boutons dans wikiEditor.

Barre standard des outils d'édition

mw.hook( 'wikipage.editform' ).add( function () {
    mw.loader.using( 'mediawiki.toolbar' ).then( function () {
        mw.toolbar.addButton( {
            imageFile: '//upload.wikimedia.org/wikipedia/en/3/34/Button_hide_comment.png',
            speedTip: 'Comment visible only for editors',
            tagOpen: '<!-- ',
            tagClose: ' -->',
            sampleText: 'Insert comment here',
            imageId: 'button-comment'
        } );
    } );
} );
  • imageFile — URL de l'image du bouton d'édition.
  • tagOpen — balise d'ouverture, dans cet exemple : <!--
  • tagClose — balise de fermeture, dans cet exemple : -->
  • sampleText — texte d'exemple à afficher entre les balises d'ouverture et de fermeture. Le contributeur doit remplacer ce texte d'exemple par son propre texte.

Voir aussi

Retrieved from "https://www.mediawiki.org/w/index.php?title=Manual:Custom_edit_buttons/fr&oldid=6811969"