Extension:WYSIWYG

The WYSIWYG extension provides more intuitive page editing 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.

Features of the WYSIWYG extension
The WYSIWYG extension supports:
 * Importing and insertion of tables and images; and formatting enumerations, font style, etc.; and links
 * Real copy and paste without postprocessing
 * Working with the known Word-like toolbar arrangement
 * Special characters
 * Real time spell-checking with recommend function
 * Undo and redo, and find and replace

Download

 * WYSIWYG (dependencies, download, help)

NOTE!

Mediawiki 1.17+
-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.

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

Customize the toolbar
Everything is explained here.

Disable for some namespaces
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 :

$wgDefaultUserOptions['riched_disable_ns_mediawiki'];

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

Style the content of the editor
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 ..."
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
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
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
Modifications (#5 and #6 refer to Download section above)
 * Buttons to create a references (footnotes): and (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)
 * 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
.ImagePreviewBox img { max-height: 200px; max-width: 300px; } .ImagePreviewBox { overflow: unset!important; }
 * 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: ]], 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
 * Image dialog enhancement (patch here) :
 * Add a button in dialog to reset to default size
 * Add a button in dialog to lock size ratio
 * Display image size by default in the dialog width/height input
 * if you type exactly the file name in the input, the image preview is loaded instantly (no need to click on the ImgList)
 * if you tick upright checkbox, the fields height and width are cleared
 * Fix a Firefox line wrap bug (patch)(thread)
 * In the image dialog, fit image preview and remove scrollbars with this css :
 * Display category name in WYSIWYG beside the "C" icon (patch here) (screenshot here)(thread here).

Todo

 * 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
 * "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

Known incompatibilities

 * 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, Title and  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
If anyone is interested in developing the extension further, there are three known repositories created by users:


 * "WYSIWYG" wikimedia.org repository from Wingsofcourage (#1 of Download section above)
 * "CKEditor in MediaWiki" github.com repository from Ciges (#2 of Download section above)
 * Mediawiki-wysiwyg github.com repository (#6 of Download section above).

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