Table des matières
Ce tutoriel est destiné aux administrateurs. Les utilisateurs du wiki ne peuvent pas avoir accès aux fichiers de configuration. Si vous n'êtes qu'un simple utilisateur, et que vous désirez ajouter des boutons dans la barre d'outils, vous pouvez renvoyer l'administrateur de votre wiki à cette page.
Ajouter des éléments à la barre d'outils est relativement simple, mais il faut avoir une connexion FTP au serveur pour uploader les icônes et éditer les fichiers.
Types de boutons
Il y a trois types principaux d'éléments :
- format - ouvre et ferme des balises autour du texte sélectionné, pour insérer par exemple un titre.
- insert - ajoute du texte au niveau du curseur.
- picker - ouvre un sous-menu contenant des éléments “insert”
Ajouter des éléments à la barre d'outils
- Trouvez ou créez un icône dont la taille est de 16×16 (une image PNG en taille 16×16 convient également)
- Uploadez l'icône dans le dossier <wiki>/lib/images/toolbar/
- Créez ou éditez le fichier <wiki>/conf/userscript.js et ajoutez le code nécessaire (voir plus bas)
Attention :
La moindre erreur de code dans le fichier userscript.js aura des conséquences sur votre toolbar. (Ex : plus de toolbar)
Dans ce cas corrigez l'erreur et revenez dans votre page, n'oubliez pas de rafraichir votre page (touche F5 du clavier) pour recharger le nouveau code.
Élément "format"
L'élément “format” est utilisé pour ajouter des balises avant et après une partie du texte. Si le texte est sélectionné, il sera encadré par les balises correspondant au bouton “format” cliqué. Sinon, les deux balises s'insèreront autour du curseur. Vous pouvez trouver, par exemple, des balises de titre, gras, italique… L'exemple suivant montre comment ajouter un bouton “format” pour le plugin <note> (cf la page des plugins).
/* creating a 'format' toolbar item */ if(toolbar){ toolbar[toolbar.length] = {"type":"format", /*type de l'élément*/ "title":"note", /*titre de l'élément*/ "icon":"note_note.png", /*nom de l'icône*/ "key":"", /*touche de raccourcis*/ "open":"<note>", /*texte inséré à gauche du curseur/texte (balise ouvrante)*/ "close":"</note>"}; } /*texte inséré à droite du curseur/texte (balise fermante)*/
Élément "insert"
L'élément “insert” est utilisé pour ajouter du texte à la position du curseur. Voici un exemple :
/* creating an 'insert' toolbar item */ if(toolbar){ toolbar[toolbar.length] = {"type":"insert", /*type de l'élément*/ "title":"Table Header", /*titre de l'élément*/ "icon":"header.png", /*nom de l'icône*/ "insert":"^"}; } /*texte à insérer*/
Élément "picker"
L'élément “picker” est utilisé pour faire apparaître un sous-menu quand l'utilisateur clique sur le bouton. Le sous-menu peut contenir des caractères ou des icônes, et ajoute (lorsqu'il est cliqué) du texte à la position du curseur (comme pour l'élément “insert”). Ce type d'élément est utilisé par dokuwiki pour montrer les smiley du wiki, ou pour la liste des caractères spéciaux. L'exemple suivant vous montre comment créer un élément “picker” pour le plugin <note> (cf la page des plugins).
/* creating a 'picker' toolbar item */ var notes_arr = new Array(); /*Initialisation de l'array contenant le sous-menu*/ notes_arr['<note></note>']='note_note.png'; /*titre_de_array['texte_à_insérer']='icône';*/ notes_arr['<note tip></note>']='note_tip.png'; /*titre_de_array['texte_à_insérer']='icône';*/ notes_arr['<note important></note>']='note_important.png'; /*titre_de_array['texte_à_insérer']='icône';*/ notes_arr['<note warning></note>']='note_warning.png'; /*titre_de_array['texte_à_insérer']='icône';*/ if(toolbar){ toolbar[toolbar.length] = {"type":"picker", /*type de l'élément*/ "title":"Notes", /*titre de l'élément*/ "icon":"note_note.png", /*icône de l'élément*/ "key":"", /*touche de raccourcis*/ "list": notes_arr, /*titre de l'array*/ "icobase":"toolbar/"}; /*subdir of lib/images/*/ }
Information
Ce texte est une traduction tirée (je n'ai donc pas repris le contenu exact) de : http://www.thefreyers.net/doku.php?id=wikiisms:toolbar
N'hésitez pas à visiter ce site pour en savoir plus !