Question

Comment puis-je ajouter une barre de boutons dans la fenêtre d'édition comme sur le site pmwiki.org ?

Réponse

Dans le fichier local/config.php ajouter :

  $EnableGUIButtons = 1;

C'est tout !

Options

Boutons plus grands

Vous trouvez peut-être les boutons originaux un peu petits (22x22), utilisez alors un nouveau jeu de boutons plus grands (34x32) :

GUIButtons32.zip

Ces boutons seront installés dans un nouveau sous-répertoire de /pub, par exemple pub/guiedit32.
Ajoutez la ligne suivante au fichier local/config.php :

 $GUIButtonDirUrlFmt = '$FarmPubDirUrl/guiedit32'; 

Nouveaux boutons

Vous pouvez ajouter de nouveaux boutons en mettant leur description dans le fichier local/config.php.

Ce script ajoute une barre de boutons au formulaire d'édition.

Les boutons sont placés dans le tableau $GUIButtons, chaque bouton est décrit par un tableau de cinq valeurs :

• la position du bouton relativement aux autres (un nombre)
• la séquence de balise d'ouverture
• la séquence de balise de fermeture
• le texte par défaut si rien n'est sélectionné
• le texte du bouton, soit (a) une balise HTML ou (b) l'URL d'une image gif/jpg/png à utiliser pour le bouton (avec le "title" optionnel entre guillemets).

La position est juste un numéro d'ordre, vous pouvez avoir des écarts supérieurs à 1 entre les nombres, ce qui permet de réserver de la place pour insérer des boutons plus tard.

Les positions actuelles sont :

• 'em' : 100
• 'strong' : 110
• 'pagelink' : 200
• 'extlink' : 210
• 'attach' : 220
• 'big' : 300
• 'small' : 310
• 'sup' : 320
• 'sub' : 330
• 'h2' : 400
• 'center' : 410

Autres boutons du fichier sample-config

• Pour les en-têtes - la différence avec l'existant est l'image

  $GUIButtons['h2'] = array(400, '\\n!! ', '\\n', '$[Heading]',
                     '$GUIButtonDirUrlFmt/h2.gif"$[Heading]"');

• Pour les sous en-têtes

  $GUIButtons['h3'] = array(402, '\\n!!! ', '\\n', '$[Subheading]',
                     '$GUIButtonDirUrlFmt/h3.gif"$[Subheading]"');

• Pour indenter le texte

  $GUIButtons['indent'] = array(500, '\\n->', '\\n', '$[Indented text]',
                     '$GUIButtonDirUrlFmt/indent.gif"$[Indented text]"');

• Pour indenter négativement le texte (l'indentation débute à la deuxième ligne)

  $GUIButtons['outdent'] = array(510, '\\n-<', '\\n', '$[Hanging indent]',
               '$GUIButtonDirUrlFmt/outdent.gif"$[Hanging indent]"');

• Pour une liste ordonnée

  $GUIButtons['ol'] = array(520, '\\n# ', '\\n', '$[Ordered list]',
               '$GUIButtonDirUrlFmt/ol.gif"$[Ordered (numbered) list]"');

• Pour une liste à puces

  $GUIButtons['ul'] = array(530, '\\n* ', '\\n', '$[Unordered list]',
               '$GUIButtonDirUrlFmt/ul.gif"$[Unordered (bullet) list]"');

• Pour une ligne de séparation horizontale

  $GUIButtons['hr'] = array(540, '\\n----\\n', '', '',
               '$GUIButtonDirUrlFmt/hr.gif"$[Horizontal rule]"');

• Un modèle de tableau simple

  $GUIButtons['table'] = array(600,
           '||border=1 width=80%\\n||$[!Hdr] ||$[!Hdr] ||$[!Hdr] ||\\n'.
           '||     ||     ||     ||\\n||     ||     ||     ||\\n',
           '', '', 
           '$GUIButtonDirUrlFmt/table.gif"$[Table]"');

Boutons divers

• Un modèle de tableau élaboré

  $GUIButtons ['advtable'] = array(610, 
    '(:table border=1 width=80%:)\\n(:cellnr:)\'\'\'$[Header]\'\'\'\\n'.
    '(:cell:)\'\'\'$[Header]\'\'\'\\n(:cell:)\'\'\'$[Header]\'\'\'\\n'.
    '(:cellnr:)\\n(:cell:)\\n(:cell:)\\n(:tableend:)\\n',
    '', '', '$GUIButtonDirUrlFmt/table2.gif"$[Advanced table]"'); 

Boutons pour les addons du Cookbook :

• Table de matières - voir Table des matières - bouton au début - (actuellement, image uniquement dans le jeu 34x32)

   $GUIButtons ['pagetoc'] = array(90, '\\n(:toc:)\\n', '', '',
     '$GUIButtonDirUrlFmt/toc.gif"$[Table of content]"');				

• Minimage - voir création automatique de vignettes - bouton à la fin.

   $GUIButtons ['image'] = array(620, 'Img:', '', '$[MyImage.jpg]',
     '$GUIButtonDirUrlFmt/image.gif"$[Insert image]"');

Discussion

Une amélioration au script peut être d'autoriser l'annulation. Sur certains navigateurs/systèmes 'Ctrl-Z' fonctionne, mais pas sur tous.

Problèmes

• Dans Opera et Khtml le texte est "inlined" à la fin du document, pas à la postion du curseur. - Schlaefer?
  C'est une limitation d'Opera -- Opera ne permet pas de trouver la position du curseur ou d'insérer du texte au milieu d'un élément <textarea>. Je ne sais pas pour Khtml, mais je suppose qu'il s'agit du même problème. --Pm

Je ne le savais pas. Je choisis de ne pas afficher la barre de boutons en mettant ce qui suit à la fin de insButton()

 var clientPC = navigator.userAgent.toLowerCase(); 
 var BrowserIsSafari = ((clientPC.indexOf('applewebkit')!=-1)
                 && (clientPC.indexOf('spoofer')==-1));
 var BrowserIsOpera = clientPC.indexOf('opera')!=-1;
 if (BrowserIsSafari || BrowserIsOpera) return;

Schlaefer?

Voir aussi

Un exemple de barre de gros boutons avec les boutons décrits ci-dessus :

http://cncloisirs.com/Fonctionnement.BacASable?action=edit

Note : vous pouvez aussi trouver sur cette fenêtre d'édition, la suppression du menu, de l'en-tête et du pied de page décrits ici : layout edit modified?

Traduction

Le texte associé aux boutons peut être traduit dans un langage donné dans les XLPage(s). Voir le paragraphe approprié dans PmWiki.XLPageTemplate.

Contributeurs

• PRZ

<< Editer par double click | Index compléments | Formatage des tableaux simples >>

Traduction de Cookbook.GuiEdit - Page originale sur PmWiki:PmWikiFr.BarreDédition

° Page originale sur PmWikiFr.BarreDédition - liens arrières
Dernières modifications:
PmWikiFr.BarreDédition: 26 mars 2005 à 20h24