Manual:Custom edit buttons/fr

From mediawiki.org
Jump to navigation Jump to search
WikiEditor
Classic edit toolbar

Vous pouvez ajouter des boutons d'édition personnalisés à la barre d'outils d'édition au-dessus de la fenêtre d'édition à l'aide de JavaScript (voir ci-dessous). Vous devez faire la différence entre la nouvelle barre d'outils ajoutée par Extension:WikiEditor et l'ancienne (également appelée barre d'outils d'édition classique).

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

Ajout à JavaScript[edit]

Les boutons personnalisés utilisent JavaScript pour implémenter leurs fonctionnalités. Pour que JavaScript soit activé sur la page d'édition, il existe plusieurs façons d'appliquer JavaScript à la page d'édition Wiki :

  • JavaScript personnel - Approprié sur un serveur avec cette fonctionnalité activée et pour les boutons que vous souhaitez uniquement disponibles pour les utilisateurs qui copient le JavaScript dans leur JavaScript personnel.
  • Extension JavaScript - Convient lorsque tous ou plusieurs utilisateurs d'un wiki doivent pouvoir utiliser le bouton. Cela suppose que vous développez une extension pour MediaWiki.
  • Core MediaWiki JavaScript - Approprié lorsque le nouveau bouton doit être autorisé sur toutes les installations Wiki.

JavaScript personnel[edit]

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

Dans Localsettings.php ajoutez $wgAllowUserJs = true; ou dans MediaWiki:Common.js ou comme un Gadget.

Extension JavaScript[edit]

Après la configuration de la structure d'extension de base, le fichier PHP de base devra contenir (ou indirectement référencé, dans des extensions complexes), les deux premières étapes ci-dessous. Pour une extension simple, comme celle qui vise uniquement à ajouter le bouton personnalisé, la troisième étape peut se produire dans le fichier PHP d'extension de base, comme dans cet exemple simple, ou dans un autre fichier PHP. Il pourrait également y avoir des besoins de localisation, qui seraient inclus dans le fichier I18N.

Définir le bundle Resource Loader[edit]

La meilleure pratique pour les extensions est l'exploitation de l'API Resource Loader, qui fournit une optimisation des performances ainsi qu'un moyen 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';

Hook de référence[edit]

L'un des hooks proposé 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 être dans le fichier PHP principal de l'extension s'il s'agit d'une simple extension ou dans un autre fichier PHP.

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

Hook Défini[edit]

Le hook de la page d'édition permet l'ajout d'une référence au module Resource Loader défini précédemment. Cet exemple montre l'ajout à chaque page. Il pourrait y avoir une logique complexe associée au moment de l'affichage et des conditions supplémentaires seraient ajoutées dans ce gestionnaire. L'argument de la méthode addModules est la même chaîne que celle définie à l'étape définissant le bundle.

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

Une fois ces trois étapes terminées, le fichier JavaScript référencé dans l'ensemble de ressources doit être appliqué à chaque page d'édition. L'API permet plusieurs fichiers et un contrôle plus précis du moment où le fichier est appelé.

Core MediaWiki[edit]

Les critères de conception pour les ajouts au cœur de MediaWiki dépassent ce qui est mentionné ici, mais les mécanismes d'ajout de boutons sont décrits.

Les fichiers JavaScript pour le noyau MediaWiki sont référencés dans le fichier 'resources/Resources.php'. Le bundle par défaut pour la page d'édition comprend 'resources/src/mediawiki.action/mediawiki.action.edit.js'. Si le bouton doit être affiché à chaque fois, ce fichier JavaScript doit être amélioré avec le nouveau bouton. Si le bouton a des conditions selon lesquelles le fichier JavaScript ne doit pas être chargé à chaque fois, des étapes similaires à une extension doivent être exécutées et il convient de déterminer si la fonction appartient au cœur du code source de MediaWiki ou si une extension est le bon outil pour livrer l'amélioration.

Extension:WikiEditor[edit]

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: ' -->'
                    }
                }
            }
        }
    } );
} );

See also Toolbar customization for more advanced options and examples.

You may also use the InsertWikiEditorButton script (by Krinkle) to simplify adding buttons to the wikiEditor.

Classic edit toolbar[edit]

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 is the full URL address to the edit button image.
  • tagOpen is the opening tag, in this example: <!--
  • tagClose is the closing tag, in this example: -->
  • sampleText is the sample text that will appear between the opening and closing tags. The editor should replace this sample text with their own text.

See also[edit]