From MediaWiki.org
Jump to: navigation, search
MediaWiki extensions manual
Crystal Clear action run.png

Release status: beta

WYSIWYG editor screenshot.png
Implementation Page action, Extended syntax, User rights, Skin, Ajax
Description Allows the easy insertion and enhanced editing of formatted data like tables, headings, enumerations etc. while they are displayed exactly like the final output.
Author(s) ontoprise GmbH, mediawiki community of wysiwyg
Latest version #1: 1.7.0
#6: 1.5.6_0
MediaWiki #1: 1.16.x and
1.17.x only

#2-#6: 1.18+
Patched versions of wysiwyg provided by users for MW >= 1.18, see download section
Database changes No
License GPL
Download Latest updated version of #6 bundle is in Github. See details in  the download section


Hooks used


Translate the WYSIWYG extension if it is available at translatewiki.net

Check usage and version matrix; code metrics

The WYSIWYG extension enables a more intuitive editing of pages on a MediaWiki-based site. When this extension is installed, the tab 'Edit' in the command bar on top of every page leads directly in the wysiwyg editing mode.

It uses a special version of the CKeditor that outputs wiki text rather than the usual HTML that caused problems for MediaWiki integrations in the past.

Warning Warning: Be sure that you check the dependencies for this extensions. Other combinations will most likely fail.

Features of the WYSIWYG extension[edit | edit source]

The WYSIWYG extension supports the following:

  • importing / insertion of tables, images, formatting stuff like enumerations, font style etc. as well as links
  • real copy and paste without postprocessing
  • working with the known Word-like toolbar arrangement
  • using special characters
  • real time spell-checking with recommender function
  • undo/redo and find and replace functionality

Download[edit | edit source]

WYSIWYG (dependencies, download, help)
Version from WYSIWYG.php Source

1.6.0_0 [B8]
3.5 MB

1.6.0-0 (1.1.2011)

http://sourceforge.net .... wysiwyg-1.6.0_0.zip


3.5 MB

1.7.0-1 (4.6.2012)

http://sourceforge.net .... wysiwyg-1.7.0_1.zip


git.wikimedia.org repository (18.8.2014), mirror in github repository: "wikimedia/mediawiki-extensions-WYSIWYG")





1.5.6_0 [B551]
wiki.linuxmatter.com (15.3.2012).... User made (experimental)


1.5.6_0 [B551]

docs.google.com (18.2.2013)... WYSIWYG_MW_v1.20.2.zip

User patched (PHP 5.4.8 compatible): almost identical to contents of #x.3, some SMWHalo part removed.




"CKEditor in MediaWiki"

github.com repository (9.4.2014): Ciges/CKEditor_in_MediaWiki

User made (beta). Patched versions of WikiEditor and WYSIWYG working together. Tested with 1.20.7 and 1.20.8 MediaWiki versions





1.5.6_0 [B551]

docs.google.com (18.2.2013) ... WYSIWYG_MW_v1.20.2.zip (bundle is for MW1.20.2, same as #x.4 above))

For MediaWiki 1.21.1 make manually following modifications with it:

Patch #1 Remove (or comment) the two lines that contains wfLoadExtensionMessages( 'CKeditor' ); (probably line 345 and 532) in WYSIWYG/CKeditor.body.php and use these settings: Thread:Extension talk:WYSIWYG/Yes: Working with MW-1.21+ with some settings.

Patch #2: Fix one line in WYSIWYG/CKeditorLinker.php to prevent 404/Forbidden error when hitting CANCEL:


1.5.6_0 [B551]

drive.google.com (16.12.2013) ... WYSIWYG_MV_v1.22.0.zip

Works on MediaWiki 1.22.0.

User patched: Tested with IE10 and Chrome, Apache/PHP 5.5.3.

IE10, Chrome


1.5.6_0 [B551]
WYSIWYG.zip (obsolete)


fork of #6 bundle below

wikirouge.net (13.1.2014).... WYSIWYG.zip is based on WYSIWYG_MV_v1.22.0.zip

1.21.2, 1.22.0 - 1.22.12, 1.23.0 - 1.23.5, 1.24 [1]
5.4.22 5.5.6 5.5.15
5.5.33 5.6.14 5.6.20
1.5.6_0 [B551+13.03.2015]
WYSIWYG-CKeditor [2]
github.com repository:

Mediawiki-wysiwyg/WYSIWYG-CKeditor. Based on #3, #4 and partly on #5. Includes additional modifications [3].

IE8[4], IE11[5], FireFox [6], Chrome [7]


  1. In MW 1.24 wysiwyg will not start (#6), issue is with MW variable $styles which has been changed from public to protected variable in includes/OutputPage.php, one possible workaround requires manual modifications outside wysiwyg, other preferred one is to comment out some code lines of CKeditor.body.php manually Github#23.
  2. Git -branch "CKeditor_v4" has updated CKeditor 4.4.4, this branch has the most recent modifications. Branch "master" has older version of CKeditor 3.6, "master" branch does not have all of the latest modifications. #6 bundle is stored in github. If you like to contribute to it, you should clone the repository of #6 in github, create new branch there for fix and finally create pull request with it, pull request will make it possible to merge patch into #6 bundle.
  3. WikiEditor has been upgraded from 0.3.0 (of MW 1.22.0) to 0.4.0 (of MW 1.23.3) in #6. Quick list of improvements is below. For more details, see readme.md here: https://github.com/Mediawiki-wysiwyg/WYSIWYG-CKeditor
  4. IE7 is not compatible, IE browsers (IE8,9,10,11) should not have any compatible settings on for your wiki site.
  5. #6 bundle of wysiwyg should be used with IE11 native mode ("Edge"), compatibility view mode should not be enabled with IE11 for your wiki site (setting is located here: "Tools=>Compatibility View settings", deselect option "Display intranet sites in compatibility view" in case your wiki is internal or remove site name from the list).
  6. FireFox v26.x - v35.x
  7. Chrome v.32.x - v.40.x

Installation[edit | edit source]

Mediawiki 1.17+[edit | edit source]

Warning Warning: The developer's site is no longer there, so instructions on installation were retrieved from Google cache and published here. Please use at your own risk.

-Quick note! When you extract the zip file you get a bunch of stuff that doesn't seem to be needed, copy the WYSIWSG folder from the extracted files into the extensions directory, then copy the code from below into LocalSettings.php Otherwise everything seems to break.

  • Download and place the file(s) in a directory called WYSIWYG in your extensions/ folder.
  • Add the following code at the bottom of your LocalSettings.php:
require_once "$IP/extensions/WYSIWYG/WYSIWYG.php";
$wgGroupPermissions['*']['wysiwyg']=true; // for all users
#$wgGroupPermissions['registered_users']['wysiwyg']=true; // or only for registered users
  • Done! Navigate to "Special:Version" on your wiki to verify that the extension is successfully installed.

Mediawiki 1.22+ and #6 bundle of Download -section[edit | edit source]

For more information about proper settings of LocalSettings.php etc. with MW 1.22+ and #6 bundle, see README.md (on github -page).

Configuration[edit | edit source]

Customize the toolbar[edit | edit source]

Everything is explained here.

Disable for some namespaces[edit | edit source]

To disable WYSIWYG for some namespaces (for example, here Mediawiki), add the following code in your LocalSettings.php :

$wgFCKEditorExcludedNamespaces = array(NS_MEDIAWIKI);

To set default preferences while letting users chose to use WYSIWYG on certain namespaces :


To hide from preferences the checkboxes relative to the namespaces, comment these lines.

Style the content of the editor[edit | edit source]

Two solutions :

  1. Edit the file ckeditor/contents.css
  2. Point to the css file of your choice, adding this line to ckeditor/config.js :
  config.contentsCss = 'path/to/your/file.css';

Config "Paste as ..."[edit | edit source]

When clicking "Paste as..." button under Firefox, you may get a popup telling your browser can't access your clipboard. This is a security protection, but you can configure your browser so that it makes an exception for your wiki. Thus, you will be able to paste in one click, with no need to paste in the dialog field and then validate. See here.

Cleaning some tags[edit | edit source]

CKeditor functions AllowedContent and DisallowedContent are supposed to do that, but do not work. However, you can add some regexp to play this role. For example, if you don't want to allow color styles, you can add here the following lines :

data = data.replace(/\bcolor:[^;"']*;?/gi,  );

Remove advanced tab in table dialog[edit | edit source]

Add these lines in config.js :

CKEDITOR.on( 'dialogDefinition', function( ev ) {
    var dialogName = ev.data.name;
    var dialogDefinition = ev.data.definition;
    if((dialogName=='table')||(dialogName=='tableProperties')) { dialogDefinition.removeContents('advanced'); }        

Improvements[edit | edit source]

Modifications (#5 and #6 refer to Download section above)

  • Buttons to create a references (footnotes): <ref>...</ref> and <reference/> (incl. in #5 and #6)
  • Fixed Images dialog (parameters) (incl. in #5 and #6)
  • Button to add [[...]] in one click in order to convert text as target link (incl. in #5 and with additional modifications in #6)
  • Autofilling of the link dialog with selected text, and autosearch] (incl. in #5 and with additional modifications in #6)
  • Dialog to handle categories (incl. in #6)
  • [//en.wikipedia.org wikipedia] is considered as external link (incl. in #6)
  • <math> tags are not deleted anymore. Math -tags, gallery- and hovergallery- tags (HoverGallery ext.), poll- and ajaxpoll- tags (poll- and ajaxpoll ext.) as well as contents of all other unknown mediawiki tags should now be possible to enter/update using tag -dialog of wysiwyg (incl. in #6)
  • Category dialog supporting hierarchical categories #6
  • Edit text with paragraph format "Formatted" (pre -tag) directly as text in wysiwyg mode. #6

Possible customizations[edit | edit source]

  • Disable search for images in link dialog (incl. in #5) Question: Is this necessary modification? You can already now specify namespace as search criteria in link dialog using ":", f.ex. keying in "image:eifel" (without quotes) will search only image names starting with string "eifel". Other namespaces works similarly. Answer: Personaly, I don't use [[Media:<link>]], and I don't want images to appear in the search list of link dialog.
  • Hide checkbox "Open rich editor in a popup" in Special:Preferences : comment these lines
  • Tables :
    • summary attribute is not supported anymore in HTML5, and is of little use. I suggest to remove it
  • Remove infotip displayed on editor in wikitext view : see here
  • Images :
    • In the dialog, fit image preview and remove scrollbars with this css :
.ImagePreviewBox img { max-height: 200px;  max-width: 300px; }
.ImagePreviewBox { overflow: unset!important; }

Todo[edit | edit source]

  • Make AllowedContent and DisallowedContent work
  • Ability to pick up available templates in a list (like old fckeditor)
  • Images :
    • Fix breaking of captions format
    • Make image captions appear in preview mode Github#53
    • Display image size by default in the dialog width/height input (Comment: This was there for a while but it has been removed after user requested it, because this conflicts one possible MW way to define size of image.)
    • Add a button in dialog to reset to default size (Comment: This can be done by inserting space in width and height boxes)
  • "Format" text block on page with nowiki or syntaxhighlight tags / edit these texts directly on page (skip using special -dialog) Github#50: version available for testing in branch CKeditor_v4_Nowiki-Synt-Pre
  • Display category name in WYSIWYG beside the "C" icon
  •  ?

Known incompatibilities[edit | edit source]

  • FileLink extension does not work with wysiwyg extension.
  • Issues with Preloader extension (#6)
    • When loading a template from Preloader, formatting may be stripped from header and thematic break tags. For example, <h3 style="font-size:16pt; font-weight=bolder; color=purple;">Title</h3> and <hr style="color:purple; width=50%; align=center;"> return only plain, black === Title === and ----, with no formatting. It is unknown whether this issue occurs with other tags, but appears likely. Github#27
  • In MW 1.24 wysiwyg will not start (#6), issue is with MW variable $styles which has been changed from public to protected variable in includes/OutputPage.php, one possible workaround requires manual modifications outside wysiwyg, other preferred one is to comment out some code lines of CKeditor.body.php manually Github#23.

Development Repositories[edit | edit source]

If anyone is interested in developing the extension further, there are three known repositories created by users:

See the discussion/talk page to get in touch with the owners of these repositories.