space space space
space space space
Your are here: Home arrow Company arrow Customers
space space space

Adding custom Buttons


Many Joomla!/Mambo components come with their own Mambots and sometimes it makes sense or is quite comfortable to have your own buttons for them in TMEdit.

The following tutorial shows how to easily add your own custom buttons to TMEdit's toolbar.

Of course the use of such buttons is not only limited to Mambot commands but can be used for inserting any code snippet on click.

Generating a custom button will be explained based on a Simpleboard Mambot, which enables you to add a discussion to a new article.

Open up the file /mambots/editors/tmedit.php in a text editor and starting from line 108 add the follwing code to register the button in TMEdit:

config<?php echo $name; ?>.registerButton({
   id      : 'discussbot',
   tooltip : 'Add a forum discussion to this article',
   image   : _editor_url + 'images/ed_template.gif',
   textMode: false,
   action  : function(editor<?php echo $name; ?>, id) {
               editor<?php echo $name; ?>.focusEditor();
               editor<?php echo $name; ?>.insertHTML('{mos_sb_discuss: }');

Now continue from line 131 (resp. 141, if you already have added the above code). Here is where the buttons are called by their ID. You may now add the button at the place you want it to appear in your toolbar and, if you want to, can separate it from other buttons with separators:

"separator", "discussbot", "separator"

Explanation of parameters

Code Explanation
id Represents the name of the button. The button is called by this ID in the toolbar.
tooltip Holds the text for a tooltip, which will show up, when pointing with your mouse at the button.
image Here you define the image for the button. Dimensions have to be 18 x 18 pixels. Put the image into the directory /mambots/editors/tmedit/images
textMode Bool value (true/false), that defines, if the button should be active in HTML code view or not (default is false)
action This holds the actual action of the button. In this example the function focusEditor() focusses the editor area, this prevents the code to be inserted somewhere on the page instead of the editor area. The function insertHTML() will insert your actual HTML code - in this example {mos_sb_discuss: }.

icon Image (template) for buttons