Recent Changes - Search:
Archive /

EditBar

Superceded

Goal

Add an edit toolbar to ease modifications and text formatting in pmWiki2 See a demo here : http://pyg.keonox.com/wiki/pmwiki.php/Pyg/HomePage?action=edit

Note: This cookbook recipe has been superceded by features included in pmwiki-2.0.beta16. In particular, the edit bar that appears on pmwiki.org is not the same as the bar described in this page. This page remains here for historical purposes. To enable PmWiki's edit bar, use $EnableGUIButtons=1; in config.php.

Features

  • should work with all browsers (tested successfully with IE 5.5/6.0, Firefox 1, Mozilla 1.6)
  • small and lightweight Javascript
  • shortcuts !
  • easily extensible

Installation

Please note that this is just a beta version, there's many things left to do. Download Attach:editbar.zip

  1. add editbar.php to /local directory
  2. edit /local/config.php and add include_once("local/editbar.php");
  3. copy editbar.js and /images directory content into your skin directory (e.g. /pub/skins/pmwiki/editbar.js)
  4. edit your .tmpl skin file and add <script language="javascript" src="$SkinDirUrl/editbar.js"></script> into the <head> tags
  5. edit your /pmwiki.php (or your /index.php if you have renamed it) and replace : <textarea name='text' rows='25' cols='60'

by 

  <textarea name='text' id='text' rows='25' cols='60'

Note for PmWiki Developers

As the pmwiki.php core file is not recommended, we should quickly modify this step into either:

  • a regex replacement into editbar.php : $PageEditFmt = preg_replace("`name='text'`", "name='text' id='text'", $PageEditFmt); (validation needed)
  • a modification of pmWiki $PageEditFmt in a further release (adding " id='text'" would not cause trouble, I think)
    Done for 2.0.beta14 --Pm

Customisation

Just edit /local/editbar.php and modify it to fit your need. Example : 

  formatButton('images/link.png','Internal link','[[',']]','Internal link','l');
  • The fisrt argument is the displayed image,
  • the second argument is the tooltip over image (or the displayed text if the image is not found),
  • third argument is the text inserted before the selection
  • fourth argument is the text inserted after the selection
  • fifth argument is the text inserted between third and fourth argument (if nothing is selected)
  • sixth argument is the shortcut key.

Discussions

Notes from Pyg

  • Please note (again) that editbar is still in early beta stage.
  • This code (and pictures) is taken and adapted from various GPL software (PhpBB=>MediaWiki=>DokuWiki=>PmWiki). Everything seems to be ok, but I still need to be sure it will not cause some licence issues
  • The example buttons are just here for demonstration purpose (we still need to make some choice about wanted buttons pictures and actions)
  • I'm affraid I hadn't really tested it, so please be lenient, I'll give it more time in early January

Notes from BenWilson

Great stuff. I did the regex you suggested rather than edit the pmwiki.php script. Worked fine. I have a couple of nit picky recommendations:

  • Rather than prepend the $PageEditFmt, create a specific variable with th content (e.g. $EditButtonFmt). This encourages the user to put that bit of code where he wants it. I say this because would prefer the buttons just above the textarea field, rather than above the entire thing. That's what I'm about to do.
  • Some of the button output clashes with my custom markup (e.g. __underline__ is __bold italic__ for me). Not that it's not painfully obvious to most of us, but you might want to document this. Shame it's not possible to pull out the syntax from the Markup().

Notes by the_CName

  • -1- the variable $SkinDirUrl not function... test at 24/12/04. In our documentation { [(approve links) edit diff] }, i've changed by '$PubDirUrl/skins/$Skin/' and this function ; by add in my config.php $SkinDirUrl = '$PubDirUrl/skins/$Skin/';
  • -2- you have one error in your script EditBar.php : at line 9, this wrote : formatButton('images/code.png','Montotype','','','Montotype','c'); - so better, this : formatButton('images/code.png','Monotype','','','Monotype','c'); - Doesn't it ?
  • -3- I've modified my [(approve links) edit diff] to translate and modify my script EditBar.php as : 
 
  baseURL = '$PubDirUrl/skins/yourskindir/';
  formatButton('images/bold.png','$[Bold]','\'\'\'','\'\'\'','$[Bold]','b');
  formatButton('images/italic.png','$[Italic]',\"\'\'\", \"\'\'\",'$[Italic]','i');
  formatButton('images/underline.png','$[Underline]','__','__','$[Underline]','u');
  formatButton('images/code.png','$[Monotype]','@@','@@','$[Monotype]','c');
  formatButton('images/fonth1.png','$[Header] 1','! ','','$[Header] 1','1');
  formatButton('images/fonth2.png','$[Header] 2','!! ','','$[Header] 2','2');
  formatButton('images/fonth3.png','$[Header] 3','!!! ','','$[Header] 3','3');
  formatButton('images/link.png','$[Internal link]','[[',']]','$[Internal link]','l');
  formatButton('images/extlink.png','$[External link]','[[',']]','$[External link] -> http://www.example.com');
  formatButton('images/list.png','$[Ordered list]','# ','\\n','$[Ordered list]');
  formatButton('images/list_ul.png','$[Bulleted list]','* ','\\n','$[Bulleted list]');
  insertButton('images/rule.png','$[Horizontal line]','----\\n');
  • -4- CAUTION : this cookbook seems incompatible with the Cookbook ChangeSummary - this breaks the EditBar !
  • -5- Not function with the browser Konqueror !
  • This also does not seem to function with Apple's Safari browser (Crisses)

Notes by PRZ

  • Is is technically feasable to have an 'undo' button, at least for the last operation ?
    • (My browser allows CTRL-Z to undo (Mozilla Firefox) BenWilson
      • The CTRL-Z is a windows feature, that comes with any windows editbox (opitzs)
  • Considering what the list buttons are doing, are they of any interest ?

Find here a Revised version? with :

  • Simplified installation procedure
  • Buttons 32 x 32 (lacking transparency, though)
  • Translatable strings as above - w/ french example
  • Only one link button
  • Table template buttons (simple and complex tables)

You can see a working example here :

Check Distribution

Have installed...as per instructions and all the cookbook notes. Have tried with both IE and Firefox. Icon pictures will not show, Clicking on the button causes javascript errors in both browsers. Hope you continue to work on this...a lot of us want something just like this. THANKS

I have same problem running beta15 under Win98/Firefox1/EasyPHP1-7/Java1.5, no edit icons are visible. Works fine at PmWiki.org though. Thanks.

Contributors