TECHNOLOGY
- Dokuwiki
- Miscellaneous
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:
open
and close
tags wrap any hilighted text, or it inserts the title
text.insert
selections. Populated by array or assosiative array(iconified) list and optional icobase.<wiki>/lib/images/toolbar
folder<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
)