Gui Edit

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:

  • the position of the button relative to others (a number)
  • the opening markup sequence
  • the closing markup sequence
  • the default text if none was highlighted
  • the text of the button, either (a) HTML markup or (b) the url of a gif/jpg/png image to be used for the button (along with optional "title" text in quotes). 
 $GUIButtons5
  • ()
  • (a)HTML(b)gif/jpg/pngURL("title")

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 :

:

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

Others buttons, from sample-config file

sample-config

  • For Heading - the difference with the existing is the image 
  $GUIButtons['h2'] = array(400, '\\n!! ', '\\n', '$[Heading]',
                     '$GUIButtonDirUrlFmt/h2.gif"$[Heading]"');
  • For sub-heading 
  $GUIButtons['h3'] = array(402, '\\n!!! ', '\\n', '$[Subheading]',
                     '$GUIButtonDirUrlFmt/h3.gif"$[Subheading]"');
  • For indenting text 
  $GUIButtons['indent'] = array(500, '\\n->', '\\n', '$[Indented text]',
                     '$GUIButtonDirUrlFmt/indent.gif"$[Indented text]"');
  • For 'outdenting' text (indent start at second line) 
  $GUIButtons['outdent'] = array(510, '\\n-<', '\\n', '$[Hanging indent]',
                     '$GUIButtonDirUrlFmt/outdent.gif"$[Hanging indent]"');
  • For ordered list 
  $GUIButtons['ol'] = array(520, '\\n# ', '\\n', '$[Ordered list]',
                     '$GUIButtonDirUrlFmt/ol.gif"$[Ordered (numbered) list]"');
  • For unordered (bullet) list 
  $GUIButtons['ul'] = array(530, '\\n* ', '\\n', '$[Unordered list]',
                     '$GUIButtonDirUrlFmt/ul.gif"$[Unordered (bullet) list]"');
  • For an horizontal rule 
  $GUIButtons['hr'] = array(540, '\\n----\\n', '', '',
                     '$GUIButtonDirUrlFmt/hr.gif"$[Horizontal rule]"');
  • A template of simple table 
  $GUIButtons['table'] = array(600,
                     '||border=1 width=80%\\n||$[!Hdr] ||$[!Hdr] ||$[!Hdr] ||\\n'.
                     '||     ||     ||     ||\\n||     ||     ||     ||\\n',
                     '', '', 
                     '$GUIButtonDirUrlFmt/table.gif"$[Table]"');

Miscellaneous buttons

  • Underlining the text 
  $GUIButtons ['underline'] = array(95, '{+', '+}', '$[text]',
   '$GUIButtonDirUrlFmt/underline.gif"$[Underline]"');
  • A template of advanced table 
  $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]"');
  • Four Buttons for custom block styles. Below they are defined to give coloured backgrounds, but they can easily be changed to other styles using wiki styles definitions (see PmWiki/CustomWikiStyles).
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

  • In Opera and Khtml the text is inlined at the end of the document, not at the cursor position. - Schlaefer
    This is a known limitation of Opera -- Opera doesn't provide the ability to find the current cursor position or insert text into the middle of a <textarea> element. I don't know about Khtml, but I suspect it's the same thing. --Pm

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

  • On loading beta44, found that the row of buttons jumps from the top of the edit box when the browser screen is wide enough, and settle between the sidebar and the left edge of the edit box. Occurs in IE and Firefox. Des 11 July 05.
Now fixed for beta45.
  • On loading beta46, noted that the editing box below the row of buttons has now changed to fixed width from the previous proportional width, which seemed much better. Des 12 July 05.

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