Mozile MediaWiki Editing Demo

From Meta

Jump to: navigation, search

This page is a proof-of-concept demonstrating how Mozile can edit MediaWiki pages and use the client-side html2wiki.xsl stylesheet to translate the resulting HTML into wikitext. Click on the EDIT link at the top of the page to start editing. Once editing has started the WIKITEXT link will display the translated wikitext. Text is not actually saved in this demonstration.

NOTES: In order to see a cursor in Firefox press "F7". Links are disabled while editing.

Mozile 0.8 adds WYSIWYG editing to web pages. It currently works in Firefox 1.5 and Internet Explorer 6 with wider browser support a future goal. It uses JavaScript and DOM methods to make changes to the document and supports the use of RelaxNG to structure editing.

Mozile is still in development! Please help out. Discuss this demo on IRC at #mozile or on our mailing list.

This page was derived from the Help:Editing all-in-one guide page in order to demonstrate a large range of wikitext formatting. There number of improvements that we would like to see:

  • Speed. Mozile is not yet optimized for speed. However this demo is significantly slower than our other demos, and is much faster when the Mozile toolbar is disabled. The reasons aren't yet completely clear.
  • A full set of wiki editing commands needs to be defined.
  • Changes to footnotes should be reflected in references.
  • Interfaces for inserting templates, images/media, references, and categories are needed.
  • Some CSS styles should change when editing is activated: mark templates as non-editable, reveal category links, etc.
  • The HTML to wikitext translation does not completely support all elements. See html2wiki.xsl.

This demonstration relies on some proposed modifications to the output of the MediaWiki wikitext parser, as noted in html2wiki.xsl.


Main Editing content

You can italicize text by putting 2 apostrophes on each side.

3 apostrophes will bold the text.

5 apostrophes will bold and italicize the text.

(Using 4 apostrophes doesn't do anything special --
there are just ' left over ones' that are included as part of the text.)

A single newline generally has no effect on the layout. These can be used to separate sentences within a paragraph. Some editors find that this aids editing and improves the diff function (used internally to compare different versions of a page).

But an empty line starts a new paragraph.

When used in a list, a newline does affect the layout (see below).

You can break lines
without a new paragraph.
Please use this sparingly.

Please do not start a link or italics or bold on one line and close it on the next.

You should "sign" your comments on talk pages:
- Three tildes gives your user name: Karl Wick
- Four tildes give your user name plus date/time: Karl Wick 07:46, 27 November 2005 (UTC)
- Five tildes gives the date/time alone: 07:46, 27 November 2005 (UTC)

Put text in a typewriter font. The same font is generally used for computer code.

Strike out or underline text, or write it in small caps.

Superscripts and subscripts: X2, H2O

Other allowed HTML: italics, citations, emphasis, big, small, font.

Centered text

The blockquote command will indent both margins when needed instead of the left margin only as the colon does.

Invisible comments to editors (<!-- -->) only appear while editing the page.

Section headings

Headings organize your writing into sections. The Wiki software can automatically generate a table of contents from them.


Using more equals signs creates a subsection.

A smaller subsection

Don't skip levels, like from two to four equals signs.

Start with 2 equals signs not 1 because 1 creates H1 tags which should be reserved for page title.

  • Unordered lists are easy to do:
    • Start every line with a star.
      • More stars indicate a deeper level.
      • Previous item continues.
    • A newline
  • in a list

marks the end of the list.

  • Of course you can start again.
  1. Numbered lists are:
    1. Very organized
    2. Easy to follow

A newline marks the end of the list.

  1. New numbering starts with 1.

Here's a definition list:

Definition of the word
A longer phrase needing definition
Phrase defined
A word 
Which has a definition
Also a second one
And even a third

Begin with a semicolon. One item per line; a newline can appear before the colon, but using a space before the colon improves parsing.

  • You can even do mixed lists
    1. and nest them
    2. inside each other
      • or break lines
        in lists.
      definition lists
      can be
A colon (:) indents a line or paragraph.

A newline starts a new paragraph.
Often used for discussion on talk pages.

We use 1 colon to indent once.
We use 2 colons to indent twice.
3 colons to indent 3 times, and so on.

You can make horizontal dividing lines (----) to separate text.

But you should usually use sections instead, so that they go in the table of contents.

You can add footnotes to sentences using the ref tag -- this is especially good for citing a source.

There are over six billion people in the world.CIA World Factbook, 2006.[1]
  1. CIA World Factbook, 2006.

For details, see Wikipedia:Footnotes and Help:Footnotes.

Here's a link to a page named Official position. You can even say official positions and the link will show up correctly.

You can put formatting around a link. Example: Wikipedia.

The first letter of articles is automatically capitalized, so wikipedia goes to the same place as Wikipedia. Capitalization matters after the first letter.

The weather in Moscow is a page that doesn't exist yet. You could create it by clicking on the link.

You can link to a page section by its title:

If multiple sections have the same title, add a number. #Example section 3 goes to the third section named "Example section".

You can make a link point to a different place with a piped link. Put the link target first, then the pipe character "|", then the link text.

Or you can use the "pipe trick" so that text in brackets does not appear.

You can make an external link just by typing a URL:

You can give it a title: Nupedia

Or leave the title blank: [1]

Linking to an e-mail address works the same way: or someone

You can use magic words to help make links to special pages such as diffs, edit pages or history pages.

{{SERVER}}{{localurl:Official position}}

{{SERVER}}{{localurl:{{PAGENAME}}|action=edit}} Edit

You can redirect the user to another page.

Category links do not show up in line but instead at page bottom and cause the page to be listed in the category.Category:English documentation

Add an extra colon to link to a category in line without causing the page to be listed in the category: Category:English documentation

The Wiki reformats linked dates to match the reader's date preferences. These three dates will show up the same if you choose a format in your Preferences:

The nowiki tag ignores [[Wiki]] ''markup''. It reformats text by removing newlines and multiple spaces. It still interprets special characters: →

The pre tag ignores [[Wiki]]
It also doesn't     reformat
It still interprets special
characters: →

Leading spaces are another way to preserve formatting.

Putting a space at the
beginning of each
line stops the text   
from being
reformatted. It still 
interprets Wiki
markup and special
characters: →

A picture, including alternate text:

This Wiki's logo

You can put the image in a frame with a caption:

This Wiki's logo
This Wiki's logo

Use media: links to link directly to sounds or videos: A sound file

This is
a table
The table's caption
Column heading 1 Column heading 2 Column heading 3
Row heading 1 Cell 2 Cell 3
Row heading A Cell B Cell C

\sum_{n=0}^\infty \frac{x^n}{q!}

Transclusion demo

This text comes from the page named Template:Transclusion demo. It has been transcluded into this page.

This template takes two parameters, and creates underlined text with a hover box for many modern browsers supporting CSS:

H:title|This is the hover text|Hover your mouse over this text

Hover your mouse over this text

Go to this page to see the H:title template itself: {{H:title}}

More complicated images:

The Palace of Westminster
The Palace of Westminster
The Palace of Westminster
The Palace of Westminster