• View
• Edit
• History
• Print
• Backlinks

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:

• 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).

ボタンは $GUIButtons配列に設定され、それぞれのボタン配列は5つの値で定義される｡

• ボタンの相対位置(番号)
• 開始のマークアップ要素
• 終了のマークアップ要素
• 強調されるデフォルトのテキスト
• ボタンテキスト、(a)HTMLマークアップ、(b)ボタンに使われるgif/jpg/png画像のURLのいずれか(クオート内に"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 :

• PageToc - see page table of contents? - button as first-(image yet only in 34x32 set)

   $GUIButtons ['pagetoc'] = array(90, '\\n(:toc:)\\n', '', '',
     '$GUIButtonDirUrlFmt/toc.gif"$[Table of content]"');				

• Minimage - see images auto resizing? - button at end.

   $GUIButtons ['image'] = array(620, 'Img:', '', '$[MyImage.jpg]',
     '$GUIButtonDirUrlFmt/image.gif"$[Insert image]"');

• Sticky notes from Markup extensions? - button at end.

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

• Signature/datestamp for discussion Attach:sig.gif Δ (image Δ only for 22x22 set)

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

• Button images for highlighting text Attach:hightext.gif Δ and background Attach:highbg.gif Δ

   $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.

• 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

• PRZ?

Category: Layout