version=pmwiki-2.2.15 ordered=1 urlencoded=1 agent=Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6.4; .NET CLR 1.0.3705; .NET CLR 1.1.4322; .NET CLR 2.0.50727; OfficeLiveConnector.1.3; OfficeLivePatch.0.0; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729) author=SchreyP charset=UTF-8 csum=update XLPage links ctime=1134474421 host=81.243.198.233 name=PmWikiJa.GuiEdit rev=5 targets=PmWikiJa.PageTableOfContents,PmWikiJa.ImagesAutoResizing,PmWikiJa.MarkupExtensions,AttachSig.Gif,Profiles.Jmi,Profiles.Schlaefer,Profiles.Pm,PmWikiJa.LayoutEditModified,Profiles.PRZ,Category.Layout text=!!!Question%0a!!!質問%0a%0aHow can I add a graphical button bar in the edit window, as in the pmwiki.org site ?%0a%0aどうやって編集画面に、pmwiki.orgサイトのようなグラフィカルボタンバーを加えられますか?%0a%0a!!!Answer%0a!!!回答%0a%0aAdd the following in local/config.php file %0a%0a $EnableGUIButtons = 1;%0a%0aThat's all !%0a%0a次のようにlocal/config.phpファイルに加えます%0a%0a $EnableGUIButtons = 1;%0a%0aそれだけ!%0a%0a%0a!!!Options %0a!!!オプション%0a%0a!!!! Larger buttons%0aYou may find the original buttons a bit small (22x22) so you can find a new set of larger buttons (34x32) here :%0a Attach:GUIButtons32.zip%0a%0a!!!! 大きなボタン%0aオリジナルの小さなボタン(22x22)を見つければ、大きなボタン(34x32)を見つけることが出来ます:%0a [[http://www.pmwiki.org/pmwiki/uploads/Cookbook/GUIButtons32.zip|GUIButtons32.zip]]%0a%0aThese buttons shall be installed in a new subdirectory of /pub directory, e.g. pub/guiedit32.\\%0aThe following line shall be added in the local/config.php file%0a%0aこれらのボタンは /pubディレクトリの新しいサブディレクトリにインストールされるでしょう、例えば pub/guiedit32に。\\%0a次の行がlocal/config.phpに加えられます。%0a%0a $GUIButtonDirUrlFmt = '$FarmPubDirUrl/guiedit32'; %0a%0a%0a!!!!New buttons%0aYou can add new buttons by adding their description in local/config.php file.%0a%0a!!!New buttons%0alocal/config.phpに定義を加えることで新しいボタンを加えられます。%0a%0aThis script adds a graphical button bar to the edit page form.%0a%0aこのスクリプトは編集ページのフォームにグラフィカルなボタンを加えます。%0a%0aThe buttons are placed in the $GUIButtons array; each button is specified by an array of five values:%0a* the position of the button relative to others (a number)%0a* the opening markup sequence%0a* the closing markup sequence%0a* the default text if none was highlighted%0a* 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).%0a%0aボタンは $GUIButtons配列に設定され、それぞれのボタン配列は5つの値で定義される。%0a* ボタンの相対位置(番号)%0a* 開始のマークアップ要素%0a* 終了のマークアップ要素%0a* 強調されるデフォルトのテキスト%0a* ボタンテキスト、(a)HTMLマークアップ、(b)ボタンに使われるgif/jpg/png画像のURLのいずれか(クオート内に"title"オプション)%0a%0a%0aThe 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. %0a%0a位置番号は順番のみで(1以上異なる数値)、後で異なるボタンを挿入できる余地を許可します。%0a%0aThe present positions are :%0a%0a表示されている位置は:%0a%0a* 'em' : 100%0a* 'strong' : 110%0a* 'pagelink' : 200%0a* 'extlink' : 210%0a* 'attach' : 220%0a* 'big' : 300%0a* 'small' : 310%0a* 'sup' : 320%0a* 'sub' : 330%0a* 'h2' : 400%0a* 'center' : 410%0a%0a%0a'''Others buttons, from sample-config file'''%0a%0a'''その他のボタン、sample-configファイルより'''%0a%0a* For Heading - the difference with the existing is the image%0a [= $GUIButtons['h2'] = array(400, '\\n!! ', '\\n', '$[Heading]',%0a '$GUIButtonDirUrlFmt/h2.gif"$[Heading]"');%0a=]%0a* For sub-heading%0a [= $GUIButtons['h3'] = array(402, '\\n!!! ', '\\n', '$[Subheading]',%0a '$GUIButtonDirUrlFmt/h3.gif"$[Subheading]"');%0a=]%0a* For indenting text%0a [= $GUIButtons['indent'] = array(500, '\\n->', '\\n', '$[Indented text]',%0a '$GUIButtonDirUrlFmt/indent.gif"$[Indented text]"');%0a=]%0a* For 'outdenting' text (indent start at second line)%0a [= $GUIButtons['outdent'] = array(510, '\\n-%3c', '\\n', '$[Hanging indent]',%0a '$GUIButtonDirUrlFmt/outdent.gif"$[Hanging indent]"');%0a=]%0a* For ordered list%0a [= $GUIButtons['ol'] = array(520, '\\n# ', '\\n', '$[Ordered list]',%0a '$GUIButtonDirUrlFmt/ol.gif"$[Ordered (numbered) list]"');%0a=]%0a* For unordered (bullet) list%0a [= $GUIButtons['ul'] = array(530, '\\n* ', '\\n', '$[Unordered list]',%0a '$GUIButtonDirUrlFmt/ul.gif"$[Unordered (bullet) list]"');%0a=]%0a* For an horizontal rule%0a [= $GUIButtons['hr'] = array(540, '\\n----\\n', '', '',%0a '$GUIButtonDirUrlFmt/hr.gif"$[Horizontal rule]"');%0a=]%0a* A template of simple table%0a [= $GUIButtons['table'] = array(600,%0a '||border=1 width=80%25\\n||$[!Hdr] ||$[!Hdr] ||$[!Hdr] ||\\n'.%0a '|| || || ||\\n|| || || ||\\n',%0a '', '', %0a '$GUIButtonDirUrlFmt/table.gif"$[Table]"');%0a=]%0a%0a!!!! Miscellaneous buttons %0a%0a* Underlining the text%0a [= $GUIButtons ['underline'] = array(95, '{+', '+}', '$[text]',%0a '$GUIButtonDirUrlFmt/underline.gif"$[Underline]"'); =]%0a%0a* A template of advanced table%0a [= $GUIButtons ['advtable'] = array(610, %0a '(:table border=1 width=80%25:)\\n(:cellnr:)\'\'\'$[Header]\'\'\'\\n'.%0a '(:cell:)\'\'\'$[Header]\'\'\'\\n(:cell:)\'\'\'$[Header]\'\'\'\\n'.%0a '(:cellnr:)\\n(:cell:)\\n(:cell:)\\n(:tableend:)\\n',%0a '', '', '$GUIButtonDirUrlFmt/table2.gif"$[Advanced table]"'); %0a=]%0a%0a* 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). %0aImages: Attach:gui-style-buttons.zip Attach:st1.gif Attach:st2.gif Attach:st3.gif Attach:st4.gif%0a%0a [= #Define custom styles s1 to s4: %0a $WikiStyle['s1']['background-color']='#def';%0a $WikiStyle['s1']['padding']='3px';%0a $WikiStyle['s2']['background-color']='#efd';%0a $WikiStyle['s2']['padding']='3px';%0a $WikiStyle['s3']['background-color']='#ffb';%0a $WikiStyle['s3']['padding']='3px';%0a $WikiStyle['s4']['background-color']='#fed';%0a $WikiStyle['s4']['padding']='3px';%0a%0a #Button definitions creating %25block s1%25 etc markup:%0a $GUIButtons ['style1'] = array(500, '%2525block s1%2525', '', '',%0a '$GUIButtonDirUrlFmt/st1.gif"$[Style 1]"');%0a $GUIButtons ['style2'] = array(510, '%2525block s2%2525', '', '',%0a '$GUIButtonDirUrlFmt/st2.gif"$[Style 2]"');%0a $GUIButtons ['style3'] = array(520, '%2525block s3%2525', '', '',%0a '$GUIButtonDirUrlFmt/st3.gif"$[Style 3]"');%0a $GUIButtons ['style4'] = array(530, '%2525block s4%2525', '', '',%0a '$GUIButtonDirUrlFmt/st4.gif"$[Style 4]"');%0a=]%0a%0a!!!! Buttons for Cookbook addons : %0a%0a* `PageToc - see [[page table of contents]] - button as first-(image yet only in 34x32 set) %0a%0a [= $GUIButtons ['pagetoc'] = array(90, '\\n(:toc:)\\n', '', '',%0a '$GUIButtonDirUrlFmt/toc.gif"$[Table of content]"'); %0a=]%0a%0a* Minimage - see [[images auto resizing]] - button at end.%0a [= $GUIButtons ['image'] = array(620, 'Img:', '', '$[MyImage.jpg]',%0a '$GUIButtonDirUrlFmt/image.gif"$[Insert image]"');%0a=]%0a%0a* Sticky notes from [[Markup extensions]] - button at end.%0a [= $GUIButtons ['snote'] = array(640, '{=', '=}', '$[text]',%0a '$GUIButtonDirUrlFmt/snote.gif"$[Sticky note]"'); %0a=]%0a%0a* Signature/datestamp for discussion Attach:sig.gif ([[Attach:sig.gif|image]] only for 22x22 set)%0a%0a [=$GUIButtons['sig']=] = array(460, '----\\n[=~~=]~:\\\\\\\\\n', '\\n [=~~=]~~\\n\\n', '',%0a [='$GUIButtonDirUrlFmt/sig.gif"$[Stamp your name and current date]"');=]%0a%0a%0a* Button images for highlighting text Attach:hightext.gif and background Attach:highbg.gif %0a [=$GUIButtons['hit'] = array(420, '%25green%25', '%25%25', '',%0a '$GUIButtonDirUrlFmt/hightext.gif"$[Highlight the text color\\n(select text, then click here)]"');%0a $GUIButtons['hib'] = array(440, '%25bgcolor=yellow%25', '%25%25', '',%0a '$GUIButtonDirUrlFmt/highbg.gif"$[Highlight the paper color]"');=]%0a%0a!!!Discussion%0a%0aAn improvement to the script can be to allow an undo. On some browser/installation 'Ctrl-Z' works, but not on all.%0a%0a'''Q:''' Is it possible to add a 2nd row of buttons below the first one ? [[~jmi]]%0aAlso curious about this as well -cs%0a%0a!!!Problems%0a* In Opera and Khtml the text is inlined at the end of the document, not at the cursor position. - [[~Schlaefer]]%0a-->%25Pm%25 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 %3ctextarea> element. I don't know about Khtml, but I suspect it's the same thing. --[[~Pm]]%0a%0aI didn't know that. I choose not to output the buttonbar by putting the following at the beginning of insButton()%0a [=var clientPC = navigator.userAgent.toLowerCase(); %0a var BrowserIsSafari = ((clientPC.indexOf('applewebkit')!=-1)%0a && (clientPC.indexOf('spoofer')==-1));%0a var BrowserIsOpera = clientPC.indexOf('opera')!=-1;%0a if (BrowserIsSafari || BrowserIsOpera) return;%0a=]%0a%0a[[~Schlaefer]]%0a%0a%0a* 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.%0a%0a-> %25Pm%25 Now fixed for beta45.%0a%0a* 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.%0a%0a%0a!!!See also%0a%0aAn example of the big button bar, with the button as defined above : %0a%0ahttp://cncloisirs.com/Fonctionnement.BacASable?action=edit%0a%0aNote : you can also find on this edit window a removal of menu, header and footer described here : [[layout edit modified]]%0a%0a!!!Translation%0a%0aThe text associated with the button can be translated in a given language via the `XLPage. See the appropriated paragraph in the [[(http://www.pmwiki.org/wiki/)Localization.XLPageTemplate]] and for Cookbook buttons in [[(http://www.pmwiki.org/wiki/)Localization.XLPageCookbookTemplate]]%0a%0a!!!Contributors%0a%0a* [[~PRZ]]%0a%0a----%0a%0aCategory: [[!Layout]] time=1270475307