OpenWetWare:Software/Projects/Editor/Toolbar

From OpenWetWare

Jump to: navigation, 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:

[[User:User_Name/monobook.js]]

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

document.write('<script type="text/javascript" ' +
    'src="http://openwetware.org/index.php?' +
    'title=MediaWiki:extraeditbuttons.js' +
    '&action=raw&ctype=text/css&dontcountme=s"></script>');

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.

Contents

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
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 [http://www.example.com 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 <math>Insert formula here</math>
Image:Nowiki icon.png No Wiki 8 <nowiki>Insert non-formatted text here</nowiki>
Image:Signature icon.png Signature 9 -- ~~~~
Image:H-line icon.png Horizontal Line 10 ----
Image:Button_headline2.png Secondary Headline * A ===Secondary headline===
Image:Button_enter.png Line break B <br />
Image:Button_align_left.png Align left * D <div style="text-align: left; direction: ltr; margin-left: 1em;"> Left-aligned text </div>
Image:Button_center.png Centred text * C <div style="text-align: center;"> Centred text </div>
Image:Button_align_right.png Align Right * D1 <div style="text-align: right; direction: ltr; margin-left: 1em;"> Right-aligned text </div>
Image:Button_font_color.png Coloured text * F <span style="color: ColourName">Coloured text</span>
Image:Button_underline.png Underline * U <u>Underlined text</u>
Image:Button_strike.png Strike through text * S <s>Struck out text</s>
Image:Button_sup_letter.png Superscript I1 <sup></sup>
Image:Button_sub_letter.png Subscript I2 <sub>Subscript text</sub>
Image:Button_small.png Small text * J1 <small>Small Text</small>
Image:Button latex.png Insert Latex <math>LaTex Expression</math>
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:

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

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

; Definition
: Item 1
: Item 2

Image:Btn_toolbar_enum.png Numbered list * W

# Element 1
# Element 2
# Element 3

Image:Btn_toolbar_liste.png Bulleted list * X

* Element 1
* Element 2
* Element 3

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

==Notes==
<!--See http://en.wikipedia.org/wiki/Wikipedia:Footnotes for an explanation of how to generate footnotes using the <ref(erences/)> tags-->
<div class='references-small'>
<references/>
</div>

Image:Tt_icon.png Teletype text T1 <tt>Teletype Text</tt>
Image:Button_tl_template.png Substitute template TL {{subst:tl|Template name}}
Image:TableStart.png Start a table TS {|
Image:TableCell.png Table cell TC |
Image:TableRow.png Table row TR |-
Image:TableEnd.png End a table TE |}
Image:Button_no_include.png No include Y1 <noinclude>Text</noinclude>
Image:Button_include.png Include only Y2 <includeonly>Text</includeonly>
Image:Button_substitute.png Substitute Z {{subst:Template}}
Image:Button_advanced_image.png Advanced image AI [[Image:M63.jpg|thumb|right|px|Caption]]
Image:Button Globe.png 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>
XEBOrder="A,B,C,E,G,I1,I2,R1,R2,R4,T1,Y1,Y2,Z,AI,N";
document.write('<script type="text/javascript" src="' 
             + 'http://en.wikipedia.org/w/index.php?title=User:MarkS/Extra edit buttons/dev.js' 
             + '&action=raw&ctype=text/javascript&dontcountme=s"></script>');
</source>

Removing buttons: rmEditButtons

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

rmEditButtons=[0,2]

will remove buttons 0 and 2 from your toolbar.

rmEditButtons=['all']

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:

myButtons={'_CODE1':['url1','Tooltip1','Before1','After1','Text1'],
           '_CODE2':['url2','Tooltip2','Before2','After2','Text2']};

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: 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:

myButtons={'_ZZ':['http://upload.wikimedia.org/wikipedia/commons/e/e9/Button_headline2.png','Mark Test','Before','After','Middle'],
'_ZA':['http://upload.wikimedia.org/wikipedia/commons/1/13/Button_enter.png','Mark2 Test','111','333','222']};

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

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:

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
Personal tools