Manuel:Boutons d'édition personnalisés
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 :
- Personal JavaScript — Appropriate on a server with this feature enabled and for buttons you want only available to users who copy the JavaScript into their personal JavaScript.
- Extension JavaScript — Appropriate when all or many users of a Wiki should be able to use the button. Ceci suppose que vous développez une extension pour MediaWiki.
- Core MediaWiki JavaScript — Appropriate when the new button should be allowed on all Wiki installations.
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
After the setup of the basic extension structure, the core PHP file will need to hold (or indirectly referenced, in complex extensions), the first two steps below. For a simple extension, like one intending only to add the custom button, the third step could occur in the core extension PHP file, as in this simple sample, or could be in another PHP file. There could also be localization needs, which would be included in the I18N file.
Définir le paquet du Resource Loader
The best practice for extensions is exploitation of the Resource Loader API, which provides performance optimization as well as a standard way of accessing 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
One of the hooks offered by the Edit page allows addition of a function reference. The function or method referenced here can be in the main PHP file for the extension if it is a simple extension or in another PHP file.
$wgHooks['EditPage::showEditForm:initial'][] = 'addModule';
Définir une accroche
The edit page hook allows addition of a reference to the Resource Loader module defined earlier. Ce exemple montre l'ajout sur chaque page. There could be complex logic associated with when to display and further conditions would be added in this handler. The argument to the addModules method is the same string as defined in the step defining the bundle.
function addModule(EditPage $editPage, OutputPage $output ) {
$output->addModules( 'ext.MyExtension' );
}
With these three steps completed, the JavaScript file referenced in the resource bundle should be applied to every edit page. L'API permet de gérer plusieurs fichiers et possède une granularité plus fine quant au contrôle du fichier appelé.
Noyau MediaWiki
The design criteria for additions to the core of MediaWiki exceed what are mentioned here, but the mechanics for adding buttons are described.
JavaScript files for core MediaWiki are referenced in the 'resources/Resources.php' file. L'archive par défaut pour la page d'édition inclut 'resources/src/mediawiki.action/mediawiki.action.edit.js'. If the button should be displayed every time, this JavaScript file should be enhanced with the new button. If the button has conditions that the JavaScript file should not be loaded every time, steps similar to an extension should be executed and consideration should be give to whether the function belongs in the core of MediaWiki source code or whether an extension is the right tool to deliver the enhancement.
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.
You may also use the InsertWikiEditorButton script (by user Krinkle) to simplify adding buttons to the 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
- Extension:WikiEditor:
- Toolbar customization
- Customizations library
- List of custom edit buttons sur Wikimedia Commons
- Reftoolbar 2.0, JavaScript du wiki qui ajoute une barre d'outils 'Cite' à l'interface utilisateur de WikiEditor.
- Barre standard d'outils d'édition :