Building a Visual Editor for Wikipedia

Accepted Session
Short Form
Scheduled: Tuesday, June 26, 2012 from 4:45 – 5:30pm in B301


Why isn’t editing Wikipedia as easy as using a word processor? Want to know how to build a reliable rich text editor in a web browser? Learn about how we are building a Wikitext visual editor, and how you can get involved!


Wikipedia is the free encyclopedia that anyone[citation needed] can edit. We know from research, however, that most people can’t edit, and that building a visual editor is the most important thing we can do to bridge the gap. Previous attempts to use existing browser-based HTML editors to edit Wikitext have fallen short of the needs of Wikipedia, primarily because Wikitext is a superset of HTML and Wikipedia’s content is so complex. We must create a new editor that is designed specifically for editing Wikitext.

Starting in 2009, Wikimedia began conducting research on the usability of MediaWiki. We conducted several qualitative and quantitative studies and the research was analyzed and shared with the community. We discovered that users were sometimes able to make simple edits to simple articles, but that in most cases they would simply give up.

We spent over a year enhancing MediaWiki’s wikitext editor. Much of our work was never able to be deployed because of the long tail of platform and browser issues which plagued our approach. Additionally, some of the early designs and assumptions were proven wrong in user testing, leading us closer to the conclusion that a visual editor is the only viable solution to significantly improving the usability of Wikipedia.

For over a year now we have been working on a visual editing system for Wikipedia. The editor is built entirely in JavaScript, CSS and HTML. We are also working on a new Wikitext parser which, unlike the previous system, can parse Wikitext into a document object model. This data model can then be edited, serialized back into Wikitext or rendered in various display formats. Looking to the future, we have also been building our systems to be capable of real-time collaborative editing.

Making Wikipedia easier to edit will make it possible for users previously unable to contribute to share their knowledge with the world. We believe that our approach could be enhanced to support many other markup languages, allowing the editor we are building to be reusable throughout the Internet. In the process of creating this editor, we have also taken a major step towards providing structured data from Wikipedia articles.


Speaking experience

We have not given this talk before, but we have submitted the same presentation to OSCON (which occurs after OSB), and similar presentations on the same topic but for a different audience to Fluent (before OSB) and Wikimania (after OSB). We haven't heard back from any of these conferences yet.

Previous talks by Trevor&Roan:

"Low-Hanging Fruit vs. Micro-optimization - Creative Techniques for Loading Web Pages Faster" at 2012 (Ballarat, VIC, Australia)

"Low-Hanging Fruit vs. Micro-optimization - Creative Techniques for Loading Web Pages Faster" at OSCON 2011 (Portland, OR, USA)

Previous talks by Roan:

"Why your extension will not be enabled on Wikimedia wikis in its current state and what you can do about it; performance, scalability and security for extension developers" at Wikimania 2010 (Gda?sk, Poland),_scalability_and_security_for_extension_developers

"The MediaWiki bot API" at Wikimania 2009 (Buenos Aires, Argentina)