This topic is for Dokuwiki administrators. Regular wiki users will not have the behind-the-scenes access needed to make the changes discussed here. If you are a wiki user and want some of the topics mentioned here to be added to your wiki, simply give this page's URL to your wiki administrator.

Adding items to the Dokuwiki toolbar is fairly simple. Its also rewarding to see the things you like made into easy-to-access buttons.

There are 3 main types of toolbar items as defined at SplitBrain:

• format - open and close tags wrap any hilighted text, or it inserts the title text.
• insert - just inserts a string
• picker - Displays a drop-down pick list with a number of insert selections. Populated by array or assosiative array(iconified) list and optional icobase.

1. Find or create a 16×16 icon to represent the item you want to add to the toolbar. See below for tips on resizing graphics to this size.
2. Upload the icon to the <wiki>/lib/images/toolbar folder
3. Create or edit the file <wiki>/conf/userscript.js and add the necessary code.

Format menu items are those that insert text before and after a piece of text. If text is hilighted before clicking on this kind of menu item, then the region will be 'wrapped' with the tags. Otherwise, the title text will be inserted between the open and close text. Good illustrations are the existing bold and italics functions, or any HTML tag since they all have begin and end text. This example shows how to add a format tag for the <note> plugin.

/* creating a 'format' toolbar item */
if(toolbar){
    toolbar[toolbar.length] = {"type":"format",
                               "title":"note",
                               "icon":"note_note.png",
                               "key":"",
                               "open":"<note>",
                               "close":"</note>"}; }

Insert menu items are those where text is just inserted at the cursor position. This is similar to the existing horizontal rule button. Here's an example:

/* creating an 'insert' toolbar item */
if(toolbar){
    toolbar[toolbar.length] = {"type":"insert",
                               "title":"Table Header",
                               "icon":"header.png",
                               "insert":"^"; }

Picker menu items are those where a submenu is shown when the user clicks on a button. The submenu can show either characters or icons, and when clicked the associated text is inserted into the document at the cursor position (like an insert menu item). This is the same behavior shown by the Smiley and Special Characters menu items. Here's an example of creating a picker for the <note> plugin.

/* creating a 'picker' toolbar item */
var notes_arr = new Array();
notes_arr['<note></note>']='note_note.png';
notes_arr['<note tip></note>']='note_tip.png';
notes_arr['<note important></note>']='note_important.png';
notes_arr['<note warning></note>']='note_warning.png';
 
if(toolbar){
  toolbar[toolbar.length] = {"type":"picker",
                             "title":"Notes",
                             "icon":"note_note.png",
                             "key":"",
                             "list": notes_arr,
                             "icobase":"toolbar/"}; /* subdir of lib/images/*/
}

I wanted an easy way to let users create tables, but I didn't want to spend the rest of my life in DHTML-land creating an Excel-like table creation wizard. So instead, I just prompt the user for number of rows and columns, and ask if they want a header included in the output. Works like a charm!

//-----------------------------------------------
//  createTable() function
//  -asks user for # cols and # rows and if a
//   header row is desired.  returns appropriate
//   wiki text
//
//  Chris@TheFreyers.net
//  4/4/2008
//-----------------------------------------------
function createTable(){
        //-----get # columns or quit-----
        var col = 0;
        var error_string = "";
        do{
                col = prompt(error_string+"Enter number of COLUMNS",col);
                if (!col) return "";
                if(isNaN(col))error_string="You didn't enter a NUMBER.  Please try again...\n\n";
        }
        while (isNaN(col));
 
        //-----get # rows or quit-----
        var row = 0;
        error_string = "";
        do{
                row = prompt(error_string+"Enter number of ROWS", row);
                if (!row) return "";
                if(isNaN(row))error_string="You didn't enter a NUMBER.  Please try again...\n\n";
        }
        while (isNaN(row));
 
        //-----reality check for bogus values-----
        if (row < 1 || col < 1){
                return "";}
 
        //-----include a header row?-----
        var hdr = confirm("Include a header row?");
 
        //-----create output text-----
        output = "";
        if (hdr == true){ //build header
                output+="\n^";
                for (var i = 0;i < col ; i++){
                        output+="    ^";
                }
                output+="\n";
        }
        for (var r=0;r < row ;r++ ){//build rows
                output+="|";
                for (var c = 0;c<col ;c++ ){
                        output+="    |"
                }
                output+="\n";
        }
        return output;
}
 
function installTableButton()
{
  var toolbar = document.getElementById('tool__bar');
  if (!toolbar) return;
 
  var btn = createToolButton('table.png', 'Create Table wizard');
  btn.onclick = function() {
    insertAtCarret('wiki__text', createTable());
    return false;
  };
  toolbar.appendChild(btn);
}
 
/*this is the trigger method that makes all
  the above get loaded into the toolbar*/
if (toolbar){
        addInitEvent(installTableButton);
}

If you have an icon that isn't 16×16, you can resize it using ImageMagick's convert utility as follows:

convert -size 16x16 myicon.jpg -resize 16x16 +profile "*" myicon.jpg

(note: this is explained fully in the man page for convert)