[[wiki:tips:editformtips]]
 
Trace: » editformtips
Translations of this page?:
Table of Contents

Adding features to the edit form

This has been superseded by the customeditform methods, there are some useful techniques here (the smiley toolbar for one) but I think if you want to do something like this yourself it would be better to look at customeditform. jet

Insert code and file fields

I wanted to add a button to enter begin and end <code> and <file> fields (I find I am typing them a lot). So I added these lines to the html.php file edit_html function

addButton('images/code1.png','Code','<code>','</code>\n','Sample Code','');
addButton('images/file.png','File','<file>','</file>\n','Sample File','');

I made two very ugly buttons so I havent implemented this on my “public” site yet (if someone wants to make a nice pair if buttons for this I would appreciate it).

I just modified the regular code button [<>]: put the brakets a bit more to the sides [1pixel] and insert a c or f in the middle [I used 12px screen font in gimp]. Looks good enough to me. I'd like to upload them here but don't know how to upload images. Thanks for the tip! I might add a lot more buttons this way… StefC

A toolbar for Smileys

If you extract the changes to script.js and the two function add_buttons from the new posting code (below) you can have a set of toolbar icons to add smileys while editing pages.

See the code: smiley_toolbar

Popup Windows for Syntax and Smileys

Search the following in function html_edit in inc/html.php: 

<?
  if($conf['useacl'] && $_SERVER['REMOTE_USER']){
    echo "insertButton('images/sig.png','".$lang['qb_sig']."','".html_signature()."','y');";
  }
?>
</script>
<?}?>

After that insert these two lines: 

<a href="wiki:syntax?do=export_html" onclick="window.open('wiki:syntax?do=export_html', '_syntax', 'height=600,resizable=yes,scrollbars=yes,width=600');return false;" target="_syntax">Syntax</a> | 
<a href="includes/smileys.html" onclick="window.open('includes/smileys.html', '_smileys', 'height=100,resizable=no,scrollbars=no,width=300');return false;" target="_smileys">Smileys</a>

And here ist my smileys.html file, which is supposed to be stored in the includes folder. You might have to change the Smileys since I used non-standard ones. — Esther Brunner 2005-03-23 03:22

Making a "New Posting" form

I have completely redone this in a more general way - code and instructions for that (and discussion about it) are at customeditform.

I will leave this here for the smiley toolbar and any other ideas people might want to extract from this.

There was a bug in the toolbars - the default text wasnt added I had to add the line 

global $lang;

To the addbuttons function so the text was available.

My idea was that I wanted an easy way for the users to add a “new” entry to a fixed place (at the top but after a heading) in an existing page. I wanted this to be a section so that they could edit just their posting if need be and I wanted the entry form to suggest certain standard fields they should always enter. This is designed for a friendly environment Im trusting the users (my friends) to not muck up the header etc… but if they do I can use revisions to bring it back anyway.

I made quite a few changes to allow a poster to create a “new” entry into a page. I havent ever used PHP before so I apologise for style errors but I just wanted something that worked ;-) . I found it quite easy to do, probably more a comment about the sensible structure of the base dokuwiki code than anything else. I hope these notes help. Feel free to email me at jeff@nano-tera.com.au if you want more info.

First I needed some way to indicate where the new entry should go. So I added a heading to the new empty page and put the line <html><!--FUNSTUFF START LEAVE THIS--></html> I have html turned on so this line doesnt show on the page.

I added this line to the html_header function in html.php (about line 102) to make a new button on the toolbar. 

       <!-- *  JET added this for JETpost   */ -->
       <a href="<?=wl($ID,"rev=$REV,do=JETpost")?>" class="button" >Post to Funstuff Log</a>

I then added these extra functions to the file html.php 

// JET - function to split wiki into two and insert empty middle section
/**
 * Returns the raw Wiki Text in two slices. Splitting at the first line
 * Containing the string $code
 * The returned order is prefix, section and suffix.
 * could fill section with new stuff (blank perhaps)
 */
function rawJETSlices($code,$id,$rev=''){
 
  $text = io_readFile(wikiFN($id,$rev));
  $text = split("\n",$text);
 
  $i=0;
  $from=0;
  while ( ( $i < count($text) ) && ($from ==0 ) ) {
    if ( strpos( $text[ $i ] , $code ) === FALSE ){ $i++; } 
	else { $from = $i + 1 ;} 
  }
  $slices[0] = join("\n",array_slice($text,0,$from));
  $slices[1] = "";
  $slices[2] = join("\n",array_slice($text,$from));
 
  return $slices;
 
}

This adds the smileys as buttons (for my friends who dont know the text equivalents). 

// JET function to add smiley buttons to entry form 
/** 
*/
function addSmileyButtons( $wr1 ){
        global $lang;
// nned to add the tooltip names to the language translation and make them different for each smiley
        if($wr1){ ?> 
          <script language="JavaScript" type="text/javascript"> 
          JETaddButton('smileys/icon_fun.gif','Smile',' ^_^ ','','','');
          JETaddButton('smileys/icon_cool.gif','Smile',' 8-) ','','','');
          JETaddButton('smileys/icon_eek.gif','Smile',' 8-O ','','','');
          JETaddButton('smileys/icon_sad.gif','Smile',' :-( ','','','');
          JETaddButton('smileys/icon_smile.gif','Smile',' :-) ','','','');
          JETaddButton('smileys/icon_doubt.gif','Smile',' :-/ ','','','');
          JETaddButton('smileys/icon_confused.gif','Smile',' :-? ','','','');
          JETaddButton('smileys/icon_biggrin.gif','Smile',' :-D ','','','');
          JETaddButton('smileys/icon_razz.gif','Smile',' :-P ','','','');
          JETaddButton('smileys/icon_surprised.gif','Smile',' :-o ','','','');
          JETaddButton('smileys/icon_mad.gif','Smile',' :-x ','','','');
          JETaddButton('smileys/icon_neutral.gif','Smile',' :-| ','','','');
          JETaddButton('smileys/icon_wink.gif','Smile',' ;-) ','','','');
        </script> 
<?        }
}

This adds the normal buttons. 

global $lang;
 
function addButtons ( $wr ) {
        if($wr){ ?>
          <script language="JavaScript" type="text/javascript"> 
          addButton('images/bold.png','<?=$lang['qb_bold']?>','**','**','<?=$lang['qb_bold']?>','b');
          addButton('images/italic.png','<?=$lang['qb_italic']?>',"\/\/","\/\/",'<?=$lang['qb_italic']?>','i');
          addButton('images/underline.png','<?=$lang['qb_underl']?>','__','__','<?=$lang['qb_underl']?>','u');
          addButton('images/code.png','<?=$lang['qb_code']?>','\'\'','\'\'','<?=$lang['qb_code']?>','c');
 
          addButton('images/fonth1.png','<?=$lang['qb_h1']?>','====== ',' ======\n','<?=$lang['qb_h1']?>','1');
          addButton('images/fonth2.png','<?=$lang['qb_h2']?>','===== ',' =====\n','<?=$lang['qb_h2']?>','2');
          addButton('images/fonth3.png','<?=$lang['qb_h3']?>','==== ',' ====\n','<?=$lang['qb_h3']?>','3');
          addButton('images/fonth4.png','<?=$lang['qb_h4']?>','=== ',' ===\n','<?=$lang['qb_h4']?>','4');
          addButton('images/fonth5.png','<?=$lang['qb_h5']?>','== ',' ==\n','<?=$lang['qb_h5']?>','5');
 
          addButton('images/link.png','<?=$lang['qb_link']?>','[[',']]','<?=$lang['qb_link']?>','l');
          addButton('images/extlink.png','<?=$lang['qb_extlink']?>','[[',']]','http://www.example.com|<?=$lang['qb_extlink']?>');
 
          addButton('images/rule.png','<?=$lang['qb_hr']?>','----\n','','');
 
          addButton('images/list.png','<?=$lang['qb_ol']?>','  - ','\n','<?=$lang['qb_ol']?>');
          addButton('images/list_ul.png','<?=$lang['qb_ul']?>','  * ','\n','<?=$lang['qb_ul']?>');
 
          addMediaSelect('images/image.png','<?=$lang['qb_media']?>','m');
          addInfobox('Click a button to get an example text','Please enter the text you want to be formatted.\\n It will be shown in the infobox for copy and pasting.\\nExample:\\n$1\\nwill become:\\n$2');;
 
 
        </script> 
<?         }
}

This is the function that actually does the work - note the extra fields that I later add into the text before storing it. I added a hidden field to indicate to the main doku processing loop that this is a special page. Any default text could be loaded in this section if wanted. 

// JET JETpost action to create different entry - inserts new one each time, 
// with special fields added in.
//
// dokuwiki to call this for action JETpost
// added button to header - idea is to make empty section and have fields that 
// fill it in this "new" form
 
function html_jetpost(){
  global $ID;
  global $REV;
  global $DATE;
  global $RANGE;
  global $PRE;
  global $SUF;
  global $lang;
  global $conf;
 
  // search for special string to indicate start of logs
  // then create empty entry in that spot.
 
	list($PRE,$text,$SUF) = rawJETSlices("<html><!--FUNSTUFF START LEAVE THIS--></html>",$ID,$REV);
 
	  $file = wikiFN($ID);
  $wr = (!file_exists($file) || is_writable($file));
  if($wr){
    if ($REV) print parsedLocale('editrev');
    print parsedLocale($include);
  }else{
    print parsedLocale('read');
    $ro='readonly="readonly"';
  }
  if(!$DATE) $DATE = @filemtime($file);
?>
  <form name="editform" method="post" action="<?=script()?>" accept-charset="<?=$lang['encoding']?>">
  <input type="hidden" name="id"   value="<?=$ID?>" />
  <input type="hidden" name="rev"  value="<?=$REV?>" />
  <input type="hidden" name="date" value="<?=$DATE?>" />
  <input type="hidden" name="prefix" value="<?=urlencode($PRE)?>" />
  <input type="hidden" name="suffix" value="<?=urlencode($SUF)?>" />
  <input type="hidden" name="JETform" value="JETform" />
 
    <table style="width:99%">
    <tr>
      <td class="toolbar" colspan="2">
	<?
	addButtons( $wr ) ; 
        addSmileyButtons( $wr ) ; 
	?>
      </td>
    </tr>
   </table>
 
  <table  style="width:98%" class="inline" >
<tr> 
<td class="inline"> Name <input class="edit" type=text name=JETrealname id="JETrealname" size=20 >  </td>
<td class="inline"> Date <input class="edit"  type=text name=JETdate size=10>  </td>
<td class="inline"> Sail Size  <input class="edit" type=text name=JETsail size=15> </td>
<td class="inline"> Board <input  class="edit"  type=text name=JETboard size=25> </td>
<td class="inline"> Place <input class="edit"  type=text name=JETplace size=25> </td>
</tr>
</table>
<table style="width:99%">
        <td colspan="2">
        <textarea name="wikitext" id="wikitext" <?=$ro?> cols="80" rows="6" class="edit"><?="\n".formText($text)?></textarea>
      </td>
    </tr>
    <tr>
      <td>
      <?if($wr){?>
        <input class="button" type="submit" name="do" value="<?=$lang['btn_save']?>" accesskey="s" title="[ALT+S]" />
        <input class="button" type="submit" name="do" value="<?=$lang['btn_preview']?>" accesskey="p" title="[ALT+P]" />
        <a href="<?=wl($ID)?>" class="button"><?=$lang['btn_cancel']?></a>
      <?}?>
      </td>
      <td align="right">
        <script type="text/javascript">
          showSizeCtl();
        </script>
      </td>
    </tr>
  </table>
  </form>
<?
}

I had created two new functions - one to make an extra toolbar with the “smileys” on it and one to make the normal toolbar (I thought I should try and be a little bit modular). I then had to modify the normal html_edit to remove the make buttons lines and replace them with the lines to call my new functions. 

      <?
addButtons( $wr ) ; 
      addSmileyButtons( $wr ) ; 
?>

Because I was making a toolbar using the smiley icons rather than the buttons I had to change the javascript that draws the buttons to size and space them differently. I should have made a new function that the old one called but hacked a duplicate function instead. Really the only difference is that the image is made with hspace=2 vspace=5 width=15 height=15 instead if just width=25 height=25 The new function in script.js is 

 
function JETaddButton(imageFile, speedTip, tagOpen, tagClose, sampleText, accessKey) {
 
  speedTip=escapeQuotes(speedTip);
  tagOpen=escapeQuotes(tagOpen);
  tagClose=escapeQuotes(tagClose);
  sampleText=escapeQuotes(sampleText);
  var mouseOver="";
 
  // we can't change the selection, so we show example texts
  // when moving the mouse instead, until the first button is clicked
  if(!document.selection && !is_gecko) {
    // filter backslashes so it can be shown in the infobox
    var re=new RegExp("\\\\n","g");
    tagOpen=tagOpen.replace(re,"");
    tagClose=tagClose.replace(re,"");
    mouseOver = "onMouseover=\"if(!noOverwrite){document.infoform.infobox.value='"+tagOpen+sampleText+tagClose+"'};\"";
  }
 
  document.write("<a ");
  if(accessKey){
    document.write("accesskey=\""+accessKey+"\" ");
    speedTip = speedTip+' [ALT+'+accessKey.toUpperCase()+']';
  }
  document.write("href=\"javascript:insertTags");
  document.write("('"+tagOpen+"','"+tagClose+"','"+sampleText+"');\">");
 
        document.write("<img hspace=\"2\" vspace=\"5\" width=\"15\" height=\"15\" src=\""+imageFile+"\" border=\"0\" ALT=\""+speedTip+"\" TITLE=\""+speedTip+"\""+mouseOver+">");
  document.write("</a>");
  return;
 
}

Then I had to modify doku.php to process my extra fields from the code, again I hacked it a bit and it certainly could have been done more neatly. I added these lines at the beginning (after the $SUF = cleanText(urldecode($_POST['suffix'])); line. This does all the work of adding the fields information back into the text. I add the username and the date of posting as well. 

 
  $JETform = cleanText($_REQUEST['JETform']);
  $JETrealname = cleanText($_REQUEST['JETrealname']);
  $JETdate = cleanText( $_REQUEST['JETdate']);
  $JETplace = cleanText($_REQUEST['JETplace']);
  $JETboard = cleanText( $_REQUEST['JETboard']);
  $JETsail = cleanText($_REQUEST['JETsail']);
 
  $htuser = $_SERVER["PHP_AUTH_USER"];
  $htpasswd = $_SERVER["PHP_AUTH_PW"];
 
  if ( $JETform == 'JETform' ) {
    $JETHEAD="";
    $JETcomma ="";
 
    if ( ! empty ($JETrealname) ) $JETHEAD = $JETrealname ;
    if ( ! empty ($JETHEAD) ) $JETcomma = ", " ;
    if ( ! empty ($JETdate) ) $JETHEAD = $JETHEAD . $JETcomma  . $JETdate ;
    if ( ! empty ($JETHEAD) ) $JETcomma = ", " ;
    if ( ! empty ($JETplace) ) $JETHEAD = $JETHEAD .  $JETcomma  . $JETplace ;
    if ( ! empty ($JETHEAD) ) $JETcomma = ", " ;
    if ( ! empty ($JETboard) ) $JETHEAD = $JETHEAD .  $JETcomma  . $JETboard ;
    if ( ! empty ($JETHEAD) ) $JETcomma = ", " ;
    if ( ! empty ($JETsail) ) $JETHEAD = $JETHEAD . $JETcomma  . $JETsail ;
    $JETHEAD = "\n===== ". $JETHEAD . " =====\n";
    $TEXT= $JETHEAD . $TEXT . "\n\nPosted " . @date($conf['dformat'],$DATE) . " by " . $htuser ; 
   }

Then I had to insert the new case of calling me extra button into the doku.php, so after the line that called html_edit I added 

  }elseif($ACT == 'JETpost'){
    html_JETpost();

And then added the extra closing } at the end of that clause. If you want to have a look at this code in action it is at http://members.iinet.net.au/~jetsoft/funstuff - you can use the username guest password guest to allow posting. I mainly put the security on to force people to identify themself. I windsurf regularily in summer with a group of friends and I made a log type page quite a few years ago for us to keep a sort of diary of what we were doing but it was always a problem that it couldnt be edited by anyone except me and that they couldnt easily put up pictures etc… I think this is the most documentation on a program change I've ever done ! Jet 2004

 
wiki/tips/editformtips.txt · Last modified: 2005/11/08 08:16 by 209.121.79.3
 
Imprint Recent changes RSS feed Creative Commons License Donate Powered by PHP Valid XHTML 1.0 Valid CSS Driven by DokuWiki
WikiForumIRCBugsTranslate