Extension:TinyMCE

TinyMCE is a MediaWiki extension that lets users edit wiki pages using version 5 of the popular open source JavaScript-based WYSIWYG editor TinyMCE created by Ephox corp. The editor can be added to the standard edit page, to forms defined by the Page Forms extension, and to regular pages in view mode.

The TinyMCE extension provides users with an alternative to the standard VisualEditor. For example, they may want to integrate their wikis in an environment where other tools may already use TinyMCE, such as Angular, Bootstrap Django, Rails, React, Swing, Vue, Joomla and Wordpress to name a few.

TinyMCE can be used 'out of the box' by following the installation instructions below. However, for more advanced uses, developers are also given total control over the configuration of TinyMCE from LocalSettings.php. This includes the ability to have multiple editor instances on a single page (in both page view mode and in forms) with different configurations for each editor instance if desired. The extension also allows users to access TinyMCE plugins produced by Ephox or third parties.

Those looking for documentation for earlier versions will them in the following locations for versions before V1.0 and version V1.0. Instructions for advance configuration can be found here.

Planned developments include integration with Parsoid and the ability to interact intelligently with MediaWiki templates when inserting them.

Download
To get Version 1.1 as a 'zip' file please click here.

Installation
Please note, this extension is only tested on versions from LTS 1.31, and may well not work on earlier versions. If you are using MediaWiki 1.27 or higher, add the following line to your LocalSettings.php file:

For earlier versions, you should call the following instead :

You must then elect to use TinyMCE in you 'editing' preferences.

.

Usage
The TinyMCE extension adds another tab to any TinyMCE-editable page, which points to "action=tinymceedit". In the vector skin, it gives this tab the name "Edit", and renames the standard "Edit" tab to "Edit source" (in whatever language the wiki is in), in the same way that the VisualEditor extension does it.

By default, all namespaces other than "Template:" and Page Forms' "Form:" namespaces are editable with TinyMCE.

Any user can get rid of TinyMCE tabs when they view pages by going to "Preferences", then clicking the "Editing" tab and deselecting the checkbox labeled "Use the TinyMCE editor to edit pages".

Toolbar buttons
There are a number of buttons on the TinyMCE editor toolbar designed for use with MediaWiki. Depending on configuration, some or all of these buttons may be shown on the 'overflow' menu which can be accessed by clicking on the menu button.

Placeholders
Templates, parser functions, links etc. are displayed as they would be rendered by MediaWiki, but behind a non-editable box. Switches in the wiki text are displayed as the section character &sect; behind a non-editable box as these are non-displayed commands to MediaWiki. Comments in the wiki text are displayed similarly as &#x1F4AC;. Because images are often displayed in a different location on the page to where they appear in the text, a placeholder &#x1F4F7; is used to show where they are in the text. All of these placeholders can be toggled on or off using the button. To edit their wiki code, select them and double click.

Drag/drop copy/paste
If one has the right permissions, it is possible to drag and drop, or copy and paste, html content into the editor. Links in the content will be converted into wikilinks. Images in the content will be uploaded and a wiki code reference will be created in the content. If copying between TinyMCE editor windows, then the translation between html and wikitext will be preserved. If pasting into a plain text element (eg a &lt;pre&gt; block or a pseudo pre block created with spaces at the start of each line) the the content will be displayed as the raw html or wikitext as appropriate. It is also possible to copy content from MSWord and Adobe PDF documents although  formatting may not be reproduced.

Escaping from blocks at start and end of content
When the cursor is in certain block elements, like tables, or &lt;div&gt; blocks at the start or end of the content, it can be difficult to exit the block structure using return on the key-pad, as &lt;p&gt; blocks are valid content within these elements. Using up or down arrow at the start or end of the content will create a new &lt;p&gt; block before or after the element currently containing the cursor.

Keyboard shortcuts
Accessibility shortcuts This is a list of available keyboard shortcuts within the editor user interface.

TinyMCE custom plugins
As noted in the introduction, there are a number of plugins available for use with TinyMCE. In addition to the standard set the following have been implemented in this extension:

Authors and credits
The TinyMCE extension of course includes the TinyMCE JavaScript-based editor, created by Ephox Corporation. This extension is based on the BlueSpice VisualEditor extension (not to be confused with the standard VisualEditor extension), developed as part of the BlueSpice package by [http://hallowelt.com Hallo Welt! GmbH]. It was then modified significantly by Duncan Crane and Yaron Koren to work as a standalone extension, and to work within forms defined by the Page Forms extension. Duncan Crane is this extension's current maintainer.

The Fontawesome plugin was created by Josh Hunt ([mailto:joshhunt180@gmail.com joshhunt180@gmail.com]). The CodeMirror code editor plugin was developed by Marijn Haverbeke.

Thanks also to the team at Wikibase bv, who helped with extensive testing and encouragement to be more ambitious with the functionality.