[pmwiki-devel] How to create a GUIEdit button using Javascript

Petko Yotov 5ko at 5ko.fr
Fri Sep 19 18:38:53 CDT 2014


See the page http://www.pmwiki.org/wiki/Test/GUIButtons?action=edit and 
the last button there "Test JS".

You can insert any HTML in the GUI Edit toolbar. If the fourth element 
of the array starts with "<", it is inserted as-is, without relying on 
the function insButton().

So, we define the button in a local config file:

$GUIButtons['test-js'] = array(5000, '', '', 'Test-JS',
   "<input type='button' name='b1' value='Test JS' onclick='MyFunc()' 
/>");

instead of "<input..." you can have "<img 
src='$GUIButtonDirUrlFmt/mybuttonicon.png' title='DoXYZ' 
onclick='MyFunc()'/>" . The onclick part is important, when a user 
clicks on the button, it will fire your custom function.

Your custom function can be defined in a javascript included by the 
skin, or even in the same config file:

$HTMLFooterFmt['test-js'] = <<<EOF
<script type="text/javascript">
function MyFunc(){
   var r = Math.round(Math.random()*1000);
   insMarkup(
      "{(mymarkupexpression "+r+" \\"",
      "\\")}\\nThe above number is "+r+"\\n",
      "Default text if none selected");
}
</script>
EOF;

This custom function creates a random number between 0 and 1000, then 
calls insMarkup() with the constructed strings to be inserted at the 
position of the cursor.

Hope this helps.

Petko

On 19.09.2014 08:31, Randy Brown wrote:
> I would appreciate help from someone who knows Javascript (which I
> don't).
> 
> I'm creating a GUIEdit button that adds a markup expression containing
> a random number and text containing the same number.
> 
> If I select in my edit form:
> 
> My text
> 
> and then click my guiedit button, I want a result like this:
> 
> {(mymarkupexpression 2 "My text")}
> The above number is 2
> 
> Here's approximately what I've written to do this. Unfortunately, what
> I wrote uses the same number for each page load rather than for each
> button click. I want the number to change with each button click:
> 
> $num = rand ( 1, 1000 );
> SDVA($GUIButtons, array(
>  'mybutton' => array(8000, "{(mymarkupexpression ".$num." "",
> "")}\nThe above number is ".$num."\n [1]", '$[Default text if
> none selected]',
>  '$GUIButtonDirUrlFmt/mybuttonicon.png"$[DoXYZ]"','')
> ));
> $HTMLHeaderFmt['DoXYZ']= <<<EOF
> <script type='text/javascript'><!--
> function DoXYZ() {
> 
> I IMAGINE THERE IS A WAY TO DO THIS IN JAVASCRIPT
> 
>  return;
> }
> //--></script>
> 
> EOF;
> 
> Thanks,
> 
> Randy
> 
> Links:
> ------
> [1] smb://n
> 
> _______________________________________________
> pmwiki-devel mailing list
> pmwiki-devel at pmichaud.com
> http://www.pmichaud.com/mailman/listinfo/pmwiki-devel



More information about the pmwiki-devel mailing list