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]"');
$GUIButtons['h3'] = array(402, '\\n!!! ', '\\n', '$[Subheading]',
'$GUIButtonDirUrlFmt/h3.gif"$[Subheading]"');
$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]"');
$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]"');
$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
$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 f 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
