View source for Help:Extension:WikiEditor/Realtime Preview

<languages/>
{{distinguish|Manual:Live preview}}

<translate><!--T:1--> '''Realtime Preview''' is a feature within [[<tvar name=1>Special:MyLanguage/Extension:WikiEditor</tvar>|WikiEditor]] that allows you to preview your changes in realtime as you are typing.</translate>
<translate><!--T:2--> It was created by the Wikimedia Foundation's [[<tvar name=1>meta:Special:MyLanguage/Community Tech</tvar>|Community Tech team]] in response to the [[<tvar name=2>m:Special:MyLanguage/Community Wishlist Survey 2021/Real Time Preview for Wikitext</tvar>|#4 wish]] in the 2021 Community Wishlist Survey.</translate>

<translate>
== Usage == <!--T:3-->
</translate>
<translate><!--T:4--> First make sure you have [[<tvar name=1>Special:MyLanguage/Extension:WikiEditor</tvar>|WikiEditor]] enabled.</translate>
<translate><!--T:5--> In your <tvar name=1>[[Special:Preferences#mw-prefsection-editing|{{int|preferences}}]]</tvar>, look for the "<tvar name=2>{{int|wikieditor-toolbar-preference}}</tvar>" preference.</translate>
<translate><!--T:6--> Note that Realtime Preview is not compatible with the <tvar name=1>{{ll|2017 wikitext editor}}</tvar>.</translate>

<translate><!--T:7--> Begin an edit.</translate>
<translate><!--T:8--> Notice that in the toolbar, you will see a "<tvar name=1>{{int|wikieditor-realtimepreview-preview}}</tvar>" button.</translate>
<translate><!--T:9--> Clicking this will activate Realtime Preview.</translate>
<translate><!--T:10--> Once activated, a preview pane is shown next to the editor.</translate>
<translate><!--T:11--> It will update anytime you stop typing.</translate>
<translate><!--T:12--> You can also hover over the preview area and click on the "<tvar name=1>{{int|wikieditor-realtimepreview-reload}}</tvar>" button to manually reload changes, or use the "<tvar name=2>{{:MediaWiki:accesskey-wikieditor-realtimepreview}}</tvar>" [[<tvar name=3>Manual:Access keys</tvar>|access key]].</translate>

<translate><!--T:19--> The editing and preview panes can be resized by dragging the middle dividing bar to the left or right.</translate>
<translate><!--T:20--> The height of both can also be adjusted by dragging the bottom resizing border.</translate>

<translate>
== Limitations == <!--T:13-->
</translate>
* <translate><!--T:14--> Absolutely positioned elements are shown relative to the preview area and not the entire page. If you need to test what your changes look like for the entire page, use the normal "<tvar name=1>{{int|showpreview}}</tvar>" button.</translate> ([[phab:T310064]])
* <translate><!--T:15--> When using both Realtime Preview and the normal preview, some user interaction requiring JavaScript might apply to only one preview area and not the other, such as the "show" and "hide" links on collapsible content.</translate> ([[phab:T307475]])
* <translate><!--T:16--> If your browser window is too narrow, the feature is automatically disabled and you will have to use the normal "<tvar name=1>{{int|showpreview}}</tvar>" button to preview your changes.</translate>

<translate>
== Hiding the button == <!--T:17-->

<!--T:18-->
If you do not want the "<tvar name=1>{{int|wikieditor-realtimepreview-preview}}</tvar>" button to appear in your toolbar, you can hide it by adding the following to your <tvar name=2>[[Special:MyPage/common.css|common.css]]</tvar>:
</translate>

<syntaxhighlight lang=css>
.tool[rel="realtimepreview"] {
    display: none;
}
</syntaxhighlight>