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:

ボタンは $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]"');

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 PmWiki.XLPageTemplate and for Cookbook buttons in PmWiki.XLPageCookbookTemplate

Contributors

Category: Layout


Return to top
0.275s