PmWikiJa / GuiEdit

Question

How can I add a graphical button bar in the edit window, as in the pmwiki.org site ?

pmwiki.org

Answer

Add the following in local/config.php file 

  $EnableGUIButtons = 1;

That's all !

local/config.php 

    $EnableGUIButtons = 1;

Options

Larger buttons

You may find the original buttons a bit small (22x22) so you can find a new set of larger buttons (34x32) here : 

  Attach:GUIButtons32.zip Δ

(22x22)(34x32): 

  GUIButtons32.zip

These buttons shall be installed in a new subdirectory of /pub directory, e.g. pub/guiedit32.
The following line shall be added in the local/config.php file 

 /pub pub/guiedit32
local/config.php

 $GUIButtonDirUrlFmt = '$FarmPubDirUrl/guiedit32';

New buttons

You can add new buttons by adding their description in local/config.php file.

New buttons

local/config.php

This script adds a graphical button bar to the edit page form.

The buttons are placed in the $GUIButtons array; each button is specified by an array of five values: 

 $GUIButtons5

The position is just an order number, you can have more than a difference of 1 between the numbers, which allow room to insert others buttons later.

(1)

The present positions are :

:

Others buttons, from sample-config file

sample-config 

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


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


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


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


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


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


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


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

Miscellaneous buttons 

  $GUIButtons ['underline'] = array(95, '{+', '+}', '$[text]',
   '$GUIButtonDirUrlFmt/underline.gif"$[Underline]"'); 

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

Images: Attach:gui-style-buttons.zip Δ Attach:st1.gif Δ Attach:st2.gif Δ Attach:st3.gif Δ Attach:st4.gif Δ 

   #Define custom styles s1 to s4:  
   $WikiStyle['s1']['background-color']='#def';
   $WikiStyle['s1']['padding']='3px';
   $WikiStyle['s2']['background-color']='#efd';
   $WikiStyle['s2']['padding']='3px';
   $WikiStyle['s3']['background-color']='#ffb';
   $WikiStyle['s3']['padding']='3px';
   $WikiStyle['s4']['background-color']='#fed';
   $WikiStyle['s4']['padding']='3px';

   #Button definitions creating %block s1% etc markup:
   $GUIButtons ['style1'] = array(500, '%25block s1%25', '', '',
     '$GUIButtonDirUrlFmt/st1.gif"$[Style 1]"');
   $GUIButtons ['style2'] = array(510, '%25block s2%25', '', '',
     '$GUIButtonDirUrlFmt/st2.gif"$[Style 2]"');
   $GUIButtons ['style3'] = array(520, '%25block s3%25', '', '',
     '$GUIButtonDirUrlFmt/st3.gif"$[Style 3]"');
   $GUIButtons ['style4'] = array(530, '%25block s4%25', '', '',
     '$GUIButtonDirUrlFmt/st4.gif"$[Style 4]"');

Buttons for Cookbook addons : 

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


   $GUIButtons ['snote'] = array(640, '{=', '=}', '$[text]',
     '$GUIButtonDirUrlFmt/snote.gif"$[Sticky note]"');	


   $GUIButtons['sig'] = array(460, '----\\n~~~:\\\\\\\\\n', '\\n ~~~~\\n\\n', '',
                  '$GUIButtonDirUrlFmt/sig.gif"$[Stamp your name and current date]"');

   $GUIButtons['hit'] = array(420, '%green%', '%%', '',
   '$GUIButtonDirUrlFmt/hightext.gif"$[Highlight the text color\\n(select text, then click here)]"');
   $GUIButtons['hib'] = array(440, '%bgcolor=yellow%', '%%', '',
                  '$GUIButtonDirUrlFmt/highbg.gif"$[Highlight the paper color]"');

Discussion

An improvement to the script can be to allow an undo. On some browser/installation 'Ctrl-Z' works, but not on all.

Q: Is it possible to add a 2nd row of buttons below the first one ? jmi? Also curious about this as well -cs

Problems

I didn't know that. I choose not to output the buttonbar by putting the following at the beginning of 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?

Now fixed for beta45.

See also

An example of the big button bar, with the button as defined above :

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

Note : you can also find on this edit window a removal of menu, header and footer described here : layout edit modified?

Translation

The text associated with the button can be translated in a given language via the XLPage. See the appropriated paragraph in the Localization.XLPageTemplate and for Cookbook buttons in Localization.XLPageCookbookTemplate

Contributors

Category: Layout