You are on page 1of 16

Rich Text Editor

for MediaWiki
Maciej Brencz Inez Korczyński
Goals

● easier way of editing MediaWiki articles


(WYSIWYG)

● compatibility with wikitext format

2
WYSIWYG editing

We're using CKEditor 3.2

3
Wikitext and HTML: back & forth
MW Parser

Wikitext HTML
'''foo''' <b>foo</b>
[[Foo|Bar]] <a href="Foo">Bar</a>

ReverseParser
4
Wikitext and HTML: problems

Wikitext HTML
'''foo'''
<b>foo</b> <b>foo</b>
{{boldit|foo}}

? 5
Wikitext and HTML: RTE approach
Modified MW Parser
Linker Preprocessor Sanitizer

Wikitext HTML in RTE


'''foo''' <b>foo</b>
<b>foo</b> <b _rte_washtml>foo</b>
{{boldit|foo}} <img _rte_placeholder>

ReverseParser
6
Wikitext and HTML: modifications
We modify HTML returned by MW parser by
adding extra attributes:
● _rte_data stores JSON encoded meta-data
● _rte_washtml indicates given node was
rendered from HTML in wikitext
● _rte_attributes stores HTML attributes to
preserve their order and formatting
● ...
7
Placeholders
● handle elements which are
hard to be fully wysiwygable
● extra HTML attribute stores
placeholder's data
● parser hooks
● magic words
● templates
● comments
8
Not editable elements
● templates and images
output complex HTML
● [[Image:foo|thumb|
caption]] is rendered as
single <img> element
● templates are handled as
placeholders
● idea to use „screenshots”
of templates
9
Edgecases
● [[Image|[[LinkInDesc]]]]
● {{temp{{temp}}11}}
● [[Mup<!-- link -->pet]]
(although we support some comments use
cases)

RTE will fallback to source mode

10
Rich Text Editor: features

11
Rich Text Editor: features

12
Rich Text Editor: features

13
Rich Text Editor: The Future

● in article editing (section editing)


● visual templates
● better handling of parser hooks (parameters
detection & editing)

14
Rich Text Editor: test site

http://communitytest.wikia.com

15
Thank you!

Q&A
16