Documentation du Dr FRAPPE

Ce wiki regroupe les résultats de mes expériences en informatique accumulés au cours de mes recherches sur le net.

Dans la mesure du possible, j'ai cité mes sources ; il en manque certainement… :-)

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.

Types de boutons

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”

Ajouter des éléments à la barre d'outils

  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)

La moindre erreur de code dans le fichier userscript.js aura des conséquences sur votre toolbar. (Ex : plus de toolbar)
Dans ce cas corriger 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 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ément "insert"

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

Ce texte est une traduction inspirée de : http://www.thefreyers.net/doku.php?id=wikiisms:toolbar.

N'hésitez pas à visiter ce site pour en savoir plus !