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

[Petko Yotov]

Try inserting a backslash before $GUIButtonDirUrlFmt:

   <img src='\$GUIButtonDirUrlFmt/mybuttonicon.png' onclick='MyFunc()'/>

If that doesn't work, use the full url of your picture:
   <img src='http://example.com/pmwiki/pub/guiedit/mybuttonicon.png' 
onclick='MyFunc()'/>

Petko

On 20.09.2014 21:46, Randy Brown wrote:
> This works., thank you!
> 
> One problem: The img code you suggested doesn't find my icon. If I use
> both buttons, my previous code's button shows its icon, while the new
> code shows an icon-not-found image. Perhaps this is related to doing
> this outside of SDVA? I don't know how to fix it.
> 
> Randy
> 
> On Sep 19, 2014, at 6:38 PM, Petko Yotov <5ko at 5ko.fr> wrote:
> 
>> 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.