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