PmWikiFr /

Barre d'édition

GratiWiki: tout le savoir gratuit sur le gratuit

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 !

Si vous avez concocté vous-même votre thème PmWiki, assurez-vous d'y avoir la balise <!--HTMLHeader--> à l'intérieur de la section <head>, sinon vous ne verrez jamais la barre de boutons (en plus de vous retrouver avec une erreur Javascript...) Benoît Pruneau 10 juin 2009 à 23h17

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]"');				

   $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 Localization.XLPageTemplate.

Contributeurs


<< 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.BarreDEdition - Référencé par
Dernières modifications:
PmWikiFr.BarreDEdition: 10 septembre 2011 à 17h40

Le contenu du site GratiWiki. Wiki ouvert et gratuit sur le gratuit, le DIY et la culture libre, sauf mentions contraires, est sous licence culturelle non-marchande ainsi que toute nouvelle contribution.
Site gratuit, sans publicité, à but non lucratif, communautaire, ouvert à tous ceux qui souhaitent partager leurs savoirs sur les échanges non-marchands, le DIY et la culture libre. Construit avec PmWiki.