How can I add a graphical button bar in the edit window, as in the pmwiki.org site ?
どうやって編集画面に、pmwiki.orgサイトのようなグラフィカルボタンバーを加えられますか？
Add the following in local/config.php file
$EnableGUIButtons = 1;
That's all !
次のようにlocal/config.phpファイルに加えます
$EnableGUIButtons = 1;
それだけ!
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';
You can add new buttons by adding their description in local/config.php file.
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:
ボタンは $GUIButtons配列に設定され、それぞれのボタン配列は5つの値で定義される｡
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]"');
$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]"');
$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]"');
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
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;
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?
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
Category: Layout