From OpenWetWare
Jump to navigationJump to search

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:


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

document.write('<script type="text/javascript" ' +
    'src="' +
    'title=MediaWiki:extraeditbuttons.js' +

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).

Icon Name Standard Code Popup Installed in OWW Comments / What is shown when editing
Bold 0 '''Bold text'''
Italic 1 ''Italic text''
Wiki link 2 [[Link title]]
Web link 3 [ link title]
Heading 4 == Headline text ==
Image 5 [[Image:Example.jpg]]
Media File Link 6 [[Media:Example.ogg]]
Mathematical Formula 7 <math>Insert formula here</math>
No Wiki 8 <nowiki>Insert non-formatted text here</nowiki>
Signature 9 -- ~~~~
Horizontal Line 10 ----
Secondary Headline * A ===Secondary headline===
Line break B <br />
Align left * D <div style="text-align: left; direction: ltr; margin-left: 1em;"> Left-aligned text </div>
Centred text * C <div style="text-align: center;"> Centred text </div>
Align Right * D1 <div style="text-align: right; direction: ltr; margin-left: 1em;"> Right-aligned text </div>
Coloured text * F <span style="color: ColourName">Coloured text</span>
Underline * U <u>Underlined text</u>
Strike through text * S <s>Struck out text</s>
Superscript I1 <sup></sup>
Subscript I2 <sub>Subscript text</sub>
Small text * J1 <small>Small Text</small>
File:Button latex.png Insert Latex <math>LaTex Expression</math>
Insert table * E Yes Displays a popup allow the user to set the type of table they want. Typical markup inserted:

{| class="wikitable"
| 1 || 2
| 3 || 4

Insert a gallery * G <gallery> Image:M63.jpg|[[M63]] Image:Mona Lisa.jpg|[[Mona Lisa]] Image:Truite arc-en-ciel.jpg|A [[trout]] </gallery>
Definition list * Q

; Definition
: Item 1
: Item 2

Numbered list * W

# Element 1
# Element 2
# Element 3

Bulleted list * X

* Element 1
* Element 2
* Element 3

Category * K [[Category:Category name]]
Tabs * L :
Block quote text * M <blockquote style="border: 1px solid blue; padding: 2em;"> Block quote </blockquote>
Comment * H <!--Comment-->
Insert code * O <code>Code</code>
Reference (see below) * R Yes <ref>Insert reference material</ref>
Add a template * T {{Template name}}
Redirect V #REDIRECT [[Article Name]]
Unsigned post FS {{subst:unsigned|user name or IP|date}}
Big text J2 <big>Big text</big>
Non breaking space N  
Pre formatted text P <pre>Pre formatted text</pre>
Link to a sub page P1 [[Page/Sub_Page]]
Start a reference (see below) R1 <ref name="Reference name
Add reference material R2 (see notes below)
End a reference (see below) R3
Reference footer R4

<!--See for an explanation of how to generate footnotes using the <ref(erences/)> tags-->
<div class='references-small'>

Teletype text T1 <tt>Teletype Text</tt>
Substitute template TL {{subst:tl|Template name}}
Start a table TS {|
Table cell TC |
Table row TR |-
End a table TE |}
No include Y1 <noinclude>Text</noinclude>
Include only Y2 <includeonly>Text</includeonly>
Substitute Z {{subst:Template}}
Advanced image AI [[Image:M63.jpg|thumb|right|px|Caption]]
Geo link GEO Yes Displays a popup to enter latitude and longitude, type of place (landmark, city ...). The popup then inserts the relevant coor template

By default only buttons with a "*" in the standard column are displayed. This is keeps the total number of buttons down and avoids showing the more complex buttons in the default arrangement. To show the extra (non-default) buttons or alter the order of the buttons are showed see the section below 'Changing the layout').

Reference Buttons

The reference buttons come in two parts:

  1. Button 'R' (included by default) includes the basic reference tags
  2. Button 'R1','R2' and 'R3' allow you to build up a reference in parts. R1 starts a reference. R2 lets you add the reference material and 'R3' finishes the reference. You are likely to want all these buttons or none of them

Changing the layout: XEBOrder

XEB displays the standard buttons in the order listed above automatically.

You can change the order of the buttons and which buttons are displayed by creating a Javascript variable XEBOrder. Set this variable equal to a string containing each button's code separated by commas. The order of the buttons in XEBOrder is the order they are displayed on the toolbar. For example:

<source lang=javascript>
document.write('<script type="text/javascript" src="' 
             + ' edit buttons/dev.js' 
             + '&action=raw&ctype=text/javascript&dontcountme=s"></script>');

Removing buttons: rmEditButtons

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

<source lang=javascript> rmEditButtons=[0,2] </source>

will remove buttons 0 and 2 from your toolbar.

<source lang=javascript> rmEditButtons=['all'] </source>

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:

<source lang=javascript> myButtons={'_CODE1':['url1','Tooltip1','Before1','After1','Text1'],




  • 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: rather than
  • 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:

<source lang=javascript> myButtons={'_ZZ':['','Mark Test','Before','After','Middle'], '_ZA':['','Mark2 Test','111','333','222']}; </source>

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!

Pop-Up buttons


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:

Button Code Button Description Comment
GEO GEO Link Allows the user to set:
  • Latitude and Longitude. You can enter just the degrees, the degrees and minutes or the degrees, minutes and seconds.
  • Should the location appear in the title bar or in the middle of the page
  • The type of location (city/landmark...).
  • The region of the location

The popup then generates a coor template.

E Table Allows the user to set:
  • Number of rows
  • Number of columns
  • If the table is sortable
  • Whether or not a title row is required.
AI Advanced Image Allows the user to set:
  • Image Size
  • Image location
  • Image caption
  • Image URL
R Reference Allows the user to set:
  • The name of the footnote
  • The text of the footnote