OpenWetWare:Software/Projects/Editor/Toolbar

Adding the formula editor to OWW would be great. To get it to work, I've first inserted a new set of pages to OWW that implement a set of extension to the standard editor that will be pretty useful by themselves. There's a much-needed simple table form that will be a blessing in addition to providing the basis for the formula editor.

This is a Javascript extension. It's not globally enabled it yet. However, it's in place and working for anyone who wants to test it.

To add it, edit the link below with your "User_Name" and open it:

User:User_Name/monobook.js

Once you have the link open in your editor, insert the following expression:

document.write(' ');

Save the document, following the visible instructions to force the current page to reload to your browser.

If you already are using this (anyone can do it by either hosting the pages in any editable OWW page or even from a remote wiki), beware that the set of icons you're using may change. Until we have a better way to configure the loaded buttons, adding new ones is a bit of a challenge. Consult with me if you need help.

Original Extension Page
"Extra edit buttons" wiki page

Button List
This button list is currently specific to OWW. While we evolve a set of buttons that reflects the needs of OWW users and works here, using the common Wikipedia pages as a place to share this from is difficult. As long as the basic framework is used, we can submit for the rest of the world to use them if more are developed.

The buttons
Extra edit buttons includes the buttons listed below. Those marked as standard are added to your toolbar if you install XEB. The remaining buttons can be included by using the XEBOrder option (see below).

You can also specify completely new buttons to be included using the myButtons option (see below).

{| border='1' class="wikitable sortable" !| Icon || Name || Standard || Code || Popup || Installed in OWW || Comments / What is shown when editing
 * [[Image:Bold icon.png]] || Bold || || 0 || ||  || Bold text
 * [[Image:Italic icon.png]] || Italic || || 1 || ||  || Italic text
 * [[Image:Button_link.png]] || Wiki link || || 2 || ||  || Link title
 * [[Image:External link icon.png]] || Web link || || 3 || ||  || link title
 * [[Image:Headline icon.png]] || Heading || || 4 || ||  || == Headline text ==
 * [[Image:Image icon.png]] || Image || || 5 || ||  || [[Image:Example.jpg]]
 * [[Image:Media icon.png]] || Media File Link || || 6 || ||  || [[Media:Example.ogg]]
 * [[Image:Math icon.png]] || Mathematical Formula || || 7 || ||  || $$Insert formula here$$
 * [[Image:Nowiki icon.png]] || No Wiki || || 8 || ||  ||  Insert non-formatted text here
 * [[Image:Signature icon.png]] || Signature || || 9 || ||  || -- ~
 * [[Image:H-line icon.png]] || Horizontal Line || || 10 || ||  ||
 * [[Image:Button_headline2.png]] || Secondary Headline || * ||A || ||  ||
 * [[Image:Media icon.png]] || Media File Link || || 6 || ||  || [[Media:Example.ogg]]
 * [[Image:Math icon.png]] || Mathematical Formula || || 7 || ||  || $$Insert formula here$$
 * [[Image:Nowiki icon.png]] || No Wiki || || 8 || ||  ||  Insert non-formatted text here
 * [[Image:Signature icon.png]] || Signature || || 9 || ||  || -- ~
 * [[Image:H-line icon.png]] || Horizontal Line || || 10 || ||  ||
 * [[Image:Button_headline2.png]] || Secondary Headline || * ||A || ||  ||
 * [[Image:Signature icon.png]] || Signature || || 9 || ||  || -- ~
 * [[Image:H-line icon.png]] || Horizontal Line || || 10 || ||  ||
 * [[Image:Button_headline2.png]] || Secondary Headline || * ||A || ||  ||
 * [[Image:H-line icon.png]] || Horizontal Line || || 10 || ||  ||
 * [[Image:Button_headline2.png]] || Secondary Headline || * ||A || ||  ||
 * [[Image:Button_headline2.png]] || Secondary Headline || * ||A || ||  ||

Secondary headline

 * [[Image:Button_enter.png]] || Line break ||  ||B || ||  ||
 * [[Image:Button_enter.png]] || Line break ||  ||B || ||  ||

Left-aligned text Centred text Right-aligned text
 * [[Image:Button_align_left.png]] || Align left || * ||D || ||  ||
 * [[Image:Button_align_left.png]] || Align left || * ||D || ||  ||
 * [[Image:Button_center.png]] || Centred text || * ||C || ||  ||
 * [[Image:Button_center.png]] || Centred text || * ||C || ||  ||
 * [[Image:Button_align_right.png]] || Align Right || * ||D1 || ||  ||
 * [[Image:Button_align_right.png]] || Align Right || * ||D1 || ||  ||
 * [[Image:Button_font_color.png]] || Coloured text || * ||F || ||  || Coloured text
 * [[Image:Button_underline.png]] || Underline || * ||U || ||  ||  Underlined text
 * [[Image:Button_strike.png]] || Strike through text || * ||S || ||  || Struck out text
 * [[Image:Button_sup_letter.png]] || Superscript || ||I1 ||||  || undefined
 * [[Image:Button_sub_letter.png]] || Subscript || ||I2 || ||  || Subscript text
 * [[Image:Button_small.png]] || Small text || * ||J1 || ||  || Small Text
 * [[Image:Button_latex.png]] || Insert Latex || || || ||  || $$LaTex Expression$$
 * [[Image:Button_array.png]] || Insert table|| * ||E || Yes || || Displays a popup allow the user to set the type of table they want. Typical markup inserted:
 * [[Image:Button_sub_letter.png]] || Subscript || ||I2 || ||  || Subscript text
 * [[Image:Button_small.png]] || Small text || * ||J1 || ||  || Small Text
 * [[Image:Button_latex.png]] || Insert Latex || || || ||  || $$LaTex Expression$$
 * [[Image:Button_array.png]] || Insert table|| * ||E || Yes || || Displays a popup allow the user to set the type of table they want. Typical markup inserted:
 * [[Image:Button_latex.png]] || Insert Latex || || || ||  || $$LaTex Expression$$
 * [[Image:Button_array.png]] || Insert table|| * ||E || Yes || || Displays a popup allow the user to set the type of table they want. Typical markup inserted:
 * [[Image:Button_array.png]] || Insert table|| * ||E || Yes || || Displays a popup allow the user to set the type of table they want. Typical markup inserted:
 * [[Image:Button_array.png]] || Insert table|| * ||E || Yes || || Displays a popup allow the user to set the type of table they want. Typical markup inserted:

; Definition
 * [[Image:Btn_toolbar_gallery.png]] || Insert a gallery || * ||G || ||  ||
 * [[Image:Btn_toolbar_gallery.png]] || Insert a gallery || * ||G || ||  ||
 * [[Image:Button_definition_list.png]] || Definition list || * ||Q || || ||
 * [[Image:Button_definition_list.png]] || Definition list || * ||Q || || ||

: Item 2


 * [[Image:Btn_toolbar_enum.png]] || Numbered list || * ||W || || ||
 * 1) Element 1
 * 1) Element 1


 * 1) Element 2
 * 1) Element 3

* Element 1
 * [[Image:Btn_toolbar_liste.png]] || Bulleted list || * ||X || || ||
 * [[Image:Btn_toolbar_liste.png]] || Bulleted list || * ||X || || ||

* Element 2 * Element 3

Block quote ==Notes==
 * [[Image:Button_category03.png]] || Category || * ||K || ||  ||
 * [[Image:Button_shifting.png]] || Tabs || * ||L || ||  || :
 * [[Image:Button blockquote.png]] || Block quote text || * ||M || ||  || 
 * [[Image:Button_shifting.png]] || Tabs || * ||L || ||  || :
 * [[Image:Button blockquote.png]] || Block quote text || * ||M || ||  || 
 * [[Image:Button blockquote.png]] || Block quote text || * ||M || ||  || 
 * [[Image:Button_comment.png]] || Comment || * ||H || ||  ||
 * [[Image:Button_code.png]] || Insert code || * ||O || ||  ||
 * [[Image:Button_reflink.png]] || Reference (see below) || * ||R ||Yes ||  ||
 * [[Image:Button_plantilla.png]] || Add a template || * ||T || ||  ||
 * [[Image:Button_redirect.png]] || Redirect ||   ||V || ||  || #REDIRECT Article Name
 * [[Image:Button_miss_signature.png]] || Unsigned post || || FS || ||  || user name or IP
 * [[Image:Button_big.png]] || Big text|| ||J2 || ||  || Big text
 * [[Image:Button_nbsp.png]] || Non breaking space ||  ||N || || ||
 * [[Image:Button_pre.png]] || Pre formatted text ||  ||P || ||  ||  Pre formatted text
 * [[Image:Button_sub_link.png]] || Link to a sub page ||  ||P1 || ||  || Page/Sub_Page
 * [[Image:Button_reflink.png]] || Start a reference (see below)||  ||R1 || ||  ||  |
 * [[Image:Button template alt.png]] || Reference footer || || R4|| || ||
 * [[Image:Button_nbsp.png]] || Non breaking space ||  ||N || || ||
 * [[Image:Button_pre.png]] || Pre formatted text ||  ||P || ||  ||  Pre formatted text
 * [[Image:Button_sub_link.png]] || Link to a sub page ||  ||P1 || ||  || Page/Sub_Page
 * [[Image:Button_reflink.png]] || Start a reference (see below)||  ||R1 || ||  ||  |
 * [[Image:Button template alt.png]] || Reference footer || || R4|| || ||
 * [[Image:Button_reflink.png]] || Start a reference (see below)||  ||R1 || ||  ||  |
 * [[Image:Button template alt.png]] || Reference footer || || R4|| || ||
 * [[Image:Button_reflink_advanced_3.png]] || End a reference (see below) ||  ||R3 || ||  || "/> |
 * [[Image:Button template alt.png]] || Reference footer || || R4|| || ||
 * [[Image:Button template alt.png]] || Reference footer || || R4|| || ||

Removing buttons: rmEditButtons
rmEditButtons is an array which lists the index numbers of the standard english wikipedia buttons you wish to remove. For example:

will remove buttons 0 and 2 from your toolbar.

will remove all the standard buttons from your toolbar. You may wish to use this option if you want to fully customise the toolbar and specify where the standard buttons appear in the toolbar.

rmEditButtons can only remove buttons that Wikipedia itself places on your toolbar. These buttons have numbered IDs. IF you wish to remove buttons from the default extra buttons supplied by XEB then you must use the XEBOrder variable and specify all the buttons you want XEB to add to your toolbar.

Standard Wikipedia buttons
The Wikimedia software used to power Wikipedia provides 10 standard buttons. The English version of Wikipedia then provides a further 11 standard buttons. These 21 buttons are the default toolbar shown to users. XEB provides access to these buttons using numeric codes starting from 0 (so Bold is 0, Italic is 1). You can use these codes in two ways: (i) You can include them in XEBOrder to make a standard button appear somewhere else in the toolbar, (ii) You can use then in rmEditButtons to stop wikipedia displaying them. In this way you can customise the whole toolbar.

User defined buttons: myButtons
XEB can also work with extra buttons created by the user. To do this you must define the myButtons variable in your monobook.js. The format of myButtons is:

where:


 * Code is a code for the button. You should place this code in XEBOrder to make your button appear on the toolbar. You can use any text you like. However, it is recommended that you start the code with an underscore to make sure it doesn't clash with any future standard XEB buttons. This must be in upper case letters.
 * URL is the full URL to the button image. You must enter the URL of the image on its own, rather than the Wikimedia page that describes the button, so use: http://upload.wikimedia.org/wikipedia/commons/f/f0/Bouton_Vandale0.png rather than http://commons.wikimedia.org/wiki/Image:Bouton_Vandale0.png
 * ToolTip is the popup tooltip that will appear when the mouse moves over the button.
 * Before is the text to insert before the current cursor location.
 * After is the text to place after the current cursor location.
 * Text is the text that is placed between before and after. If the user has selected text in the edit box when the button is pressed this selected text will be placed between before and after instead.

This example defines two extra buttons:

Pictures for myButtons
This is the list of buttons we know of so far (the list below includes the standard buttons). Buttons used by the 'extra buttons' have captions. Please upload any new buttons you find to the commons:Category:ButtonToolbar and add them to the gallery below (in alphabetical image order, so we can find duplicates and easily know what is there). Buttons not in Commons cat are tagged as MOVE TO COMMONS (please upload them to Commons and remove the tag from the gallery). The list as of now may contain duplicates, images not upload to commons and images at commons not at category — please help fix it!

Popups
From the 6 March 2007 XEB includes popups on a number of buttons. Popups are dialog boxes that float over the web page when you click on the button. The dialog boxes are to make it easier to customise in more detail the markup code that gets entered.

The popups currently available are: