Ajouter ses propres boutons à la barre d'outils

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'outil est relativement simple, mais il faut avoir une connexion ftp au serveur pour uploader les icônes et éditer les fichiers.

Il y a trois type principaux d'éléments :

• format - ouvre et ferme des balises autours 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”

1. Trouvez ou créez un icône dont la taille est de 16×16 (une image png en taile 16×16 convient également)
2. Uploadez l'icône dans le dossier <wiki>/lib/images/toolbar/
3. Créez ou éditez le fichier <wiki>/conf/userscript.js et ajoutez le code nécessaire (voir plus bas)

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 autours 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).

"format" : exemple du plugin "note"

/* 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'élément “insert” est utilisé pour ajouter du texte à la position du curseur. Voici un exemple :

"insert"

/* 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'é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 montre comment créer un élément “picker” pour le plugin “note” (cf la page des plugins).

"picker" : exemple du plugin "note"

/* 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/*/
}