Jump to content

VisualEditor/Basic example worksheet

From mediawiki.org

Some test cases for VisualEditor.

Text formatting and lists[edit]

Text style[edit]

This is some basic text. This is a link and some italics bold text.

Here we talk shop about code because code instanceof Poetry === true. And perhaps some text using the obsolete teletype text element.



  • This bullet list should display "normally"
  • With another bullet
    • With a sub-item
      1. A numbered sub-sub-item
      2. And its successor
  • And be able to be split, extended, in-/out-dented and ended as normal.

Caching layers:

  1. Browser caches
    1. Native browser cache
    2. HTML5 Web Storage (SessionStorage, LocalStorage, ..)
  2. Front-end Varnishes
    Varnish caches the entire HTTP responses, including thumbnails of images, frequently-requested pages, ResourceLoader modules, and similar items that can be retrieved over HTTP. The front-end Varnishes keep these in memory. A weighted-random load balancer (LVS) distributes web requests to the front-end Varnishes.
  3. Back-end Varnishes
    When a front-end Varnish doesn't have a response cached, it passes the request to the back-end.
  4. memcached
  5. Object cache
  6. Query cache


== Preformatted ==
Example '''test''' with [[link]] and <em>emphasis</em>.

Syntax highlighter[edit]

See also Extension:SyntaxHighlight GeSHi


var util = require('util');

 * A non-empty basket of green-coloured fruits
 * that are not pears.
 * @class
 * @extends FruitBigBasket
 * @constructor
 * @param {Array} items
 * @throws {InvalidArgumentError} If basket contains unexpected items.
function SmoigelBasket(items) {
	SmoigelBasket.super_.apply(this, arguments);

	if (
		!items.length ||
			items.some(function (item) {
				return !item.color.isLike(Color.newFromKeyword('green')) || item instanceof PearFruit;
	) {
		throw new InvalidArgumentError();

util.inherits(SmoigelBasket, FruitBigBasket);


	Registry, TraditionRegistry,
	Fruit, PearFruit,
	Event, BirthdayEvent, TransferEvent,
	Basket, BigBasket, FruitBigBasket,
	Human, MaleHuman, FemaleHuman,
var util = require('util');

 * "Origin"
 * Based on a scene from an episode of Friday Night Dinner.
 * @package Smoigel
 * @author Timo Tijhof, 2013

var traditions = TraditionRegistry.getSingleton();

var e = new TransferEvent({
	spec: {
		from: {
			instanceof: Human

		items: [SmoigelBasket],

		 * Custom validation.
		 * @param {Human} target
		 * @param {Event} concurrentEvent Instance of spec.when.
		 * @return {boolean}
		to: function (target, concurrentEvent) {
			// To the eldest son of the family, so, a male.
			return target instanceof MaleHuman &&
				// Validate the target is a child in the family of the home
				// the party subject lives in. Not a sibling per se, because
				// he or she could be either a child or a parent.
				// The gift should be given to the eldest son of the family he lives in
				// (not of the family the object is born in, per se).
				concurrentEvent.getSubject().getHomeFamily().getChildren().toArray().indexOf(target) !== -1 &&
				// Finally confirm he has no older siblings.
				target.siblings.sort(function (a, b) {
					return a.age < b.age;
				})[0] === target;
		when: BirthdayEvent


Plain blockquote:

Cupcake ipsum dolor sit amet tart powder tootsie roll cotton candy. Lollipop tootsie roll tiramisu chocolate bar jelly-o ice cream tootsie roll powder. I love jelly-o chupa chups applicake. Candy fruitcake muffin liquorice oat cake.

– Cupcake Ipsum

Fancy blockquote:

This was a triumph. I'm making a note here: HUGE SUCCESS.

So I'm GLaD. I got burned.


GLaDOS was "making a note here".


Names Letters Numbers
Foo A 100
Bar C 0
lorem B 0.5
ipsum A 250
Keys Transcluded table heading
foo transcluded cell value
bar ipsum
baz transcluded table data
quux sit


See also Extension:WikiHiero


Species C1 C2 C3
Sp1 1 1 0
Sp2 1 0 1
Sp3 1 1 1


See also Extension:Score and wikipedia:Help:Score

Basic LilyPond:

{c' d' e' f' f' fes' eis' e'}

More elaborate and with audio player:

  \transpose c g \relative c' {
  \key c \minor
  \time 4/4
    c4 e8 e g4 g          % (text after the % is just a comment)
    <c es g>2 <c es g>    % angle brackets create chords
    es4 d( ces b)         % parentheses create ties
    a4. r8 a4 a           % r creates rests
    e-- e-> e-. g\fermata % accents and other signs
    \bar "|."

Enhanced elements[edit]

Table with sortable (jquery.tablesorter) and mw-collapsible (jquery.makeCollapsible).

Keys Values
foo lorem
bar ipsum
baz dolor
quux sit





Media files[edit]

This is an inline hello image, a frameless Test. one, and a block one with a caption:

hello, you should be able to drag this around.

Image without defined size

This is a video file that you should be able to see.



Bold text:


Multi-line text:

Test split on multiple lines.







With an inline image:

Test Test..

With a thumb image:


With a ref:

Test[imagenotes 1]
  1. Heya.

With a div:



This is an example of using the "Unsigned" template, an inline template which you can edit (documentation): — Preceding unsigned comment added by User:Jdforrester (WMF) (talkcontribs) 16:25, 12 June 2013 (UTC)[reply]

Transclusion with html comment in target — Preceding unsigned comment added by User:Krinkle (talkcontribs) 21:42, 9 July 2014 (CEST).

Transclusion with wikitext expression as target — Preceding unsigned comment added by User:Krinkle (talkcontribs) 21:42, 9 July 2014 (CEST).

Wikimedia engineering activity

This is an example of using the {{Wikimedia engineering project information}} template, a block template which you can edit (documentation):


Simple reference.[1]

Bold text reference.[2]

Multi-line reference.[3]

In-line image in a reference.[4]

Block-level image in a reference.[5]

Heading in a reference.[6]

Template in a reference.[7]

Another Template in a reference.[8]

List in a reference.[9]

Multi-level lists in a reference.[10]

Reference in a reference.[11]

Cite web[edit]

And inline in a reference. [12]

References list[edit]

  1. Simple reference!
  2. Bold text reference!
  3. Multi-line reference!
  4. In-line image in a reference! Test.
  5. Block-level image in a reference!
  6. This is a


    in a reference!

  7. Template "Echo". Echoed content!
  8. Template "Unsigned". — Preceding unsigned comment added by MediaWiki default (talkcontribs)
    • List
    • in
    • a
    • reference!
    1. Multi-level
      • lists
    2. reference!
  9. Reference[notes 1]
  10. Template:Cite web

Notes list[edit]

  1. in a reference

See also[edit]