Main Page: Difference between revisions

From EveryProcedure
No edit summary
Tag: Reverted
No edit summary
 
(One intermediate revision by the same user not shown)
Line 1: Line 1:
<languages/>
{{Special:AllPages}}
{{Extension
|name        = TinyMCE
|status      = stable
|type1      = hook
|newhook1    = TinyMCEDisable
|author      = Duncan Crane, [[User:Yaron_Koren|Yaron Koren]], [https://www.ephox.com/about/ Ephox Corporation], [https://hallowelt.com Hallo Welt! GmbH]
|image      = TinyMCE Editor_Example.png|TinyMCE Editor Example
|version    = 1.1
|update      = {{ym|2021|05}}
|compatibility policy = master
|mediawiki  = 1.31+
|download    = {{WikimediaDownload|TinyMCE|phab=ETMC}}
[[#Download|See here]]
|changelog  =
|composer =
|description = <translate><!--T:1--> Allows for editing pages, sections, form fields etc. using the <tvar name=1>[https://www.tinymce.com/ TinyMCE]</tvar> JavaScript-based WYSIWYG editor</translate>
|parameters  =
|rights      =
|example    = [http://discoursedb.org/wiki/My_Test_Page?action=tinymceedit An example of TinyMCE on discoursedb.org]
|phabricator = mediawiki-extensions-tinymce
}}
 
'''TinyMCE''' is a MediaWiki extension that lets users edit wiki pages using version 5 of the popular open source JavaScript-based WYSIWYG editor [https://www.tinymce.com/ TinyMCE] created by Ephox corp.
The editor can be added to the standard edit page, to forms defined by the [[Extension:Page Forms|Page Forms]] extension, and to regular pages in view mode.
 
The TinyMCE extension provides users with an alternative to the standard [[Extension:VisualEditor|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|installation instructions]] below.
However, for more advanced uses, developers are also given total control over the [[Extension:TinyMCE/Configuration|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 [[Extension:TinyMCE/Archive Documents/Pre V 1.0|versions before V1.0]] and [[Extension:TinyMCE/Archive Documents/Pre V 1.1|version V1.0]].
Instructions for advance configuration can be found [[Extension:TinyMCE/Configuration|here]].
 
Planned developments include integration with Parsoid and the ability to interact intelligently with MediaWiki templates when inserting them.
 
<translate>
 
==Download== <!--T:2-->
 
<!--T:12-->
To get Version 1.1 as a 'zip' file please click [<tvar name=url>https://github.com/wikimedia/mediawiki-extensions-TinyMCE/archive/refs/heads/master.zip</tvar> here].
 
==Installation== <!--T:3-->
</translate>
<translate><!--T:13--> Please note, this extension is only tested on versions from LTS 1.31, and may well not work on earlier versions.</translate>
<translate><!--T:14--> If you are using MediaWiki 1.27 or higher, add the following line to your <tvar name=1>LocalSettings.php</tvar> file:</translate>
 
<syntaxhighlight lang="php">wfLoadExtension( 'TinyMCE' );
$wgTinyMCEEnabled = true;</syntaxhighlight>
 
For earlier versions, you should call the following instead ():
 
<syntaxhighlight lang="php">require_once "$IP/extensions/TinyMCE/TinyMCE.php";
$wgTinyMCEEnabled = true;</syntaxhighlight>
 
'''If you install this extension, It is very important you applicate [https://gerrit.wikimedia.org/r/c/mediawiki/extensions/TinyMCE/+/697067/2/TinyMCEAction.php this patch.]'''
 
'''Note: The patch is not necessary for MediaWiki 1.37 or higher.'''
 
You must then elect to use TinyMCE in your 'editing' preferences.
 
[[File:TinyMCE_edit_preferences.png|300px|border]].
 
<translate>
==Usage== <!--T:4-->
</translate>
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".
 
<translate>
=== Toolbar buttons === <!--T:5-->
</translate>
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 [[File:Additional menu items button capture from TinyMCE extension.png|30px|border|Additional menu items button]] menu button.
 
{| class="wikitable" style="border-collapse: collapse"
|- style="height: 28px;"
! <translate><!--T:6--> Toolbar Button</translate>
! <translate><!--T:7--> Action performed</translate>
|- style="height: 139px;"
| [[File:Link button capture from TinyMCE extension.png|60px|border|Link button]]
| invokes a dialog for inserting or editing a link, including both "external" and "internal" (wiki page) links. If anything is selected when the button is pressed it will form the label part of the link. A link can be broken by selecting it and clicking the [[File:Unlink button capture from TinyMCE extension.png|30px|border|Unlink button]] button. Double-clicking an existing link will invoke the link dialog on that link, allowing parameters to be changed
|- style="height: 58px;"
| [[File:Edit wikitext button capture from TinyMCE extension.png|60px|border|Edit wikitext button]]
| invokes a dialog which allows editing the selected content as wiki text. If nothing is selected then the whole content is inserted into the dialog. Double clicking elements that are formatted by the wiki parser (eg templates, parser functions, switches, comments) will invoke the wiki text editor on these elements.
|- style="height: 96px;"
| [[File:Image button capture from TinyMCE extension.png|60px|border|Image button]]
| invokes a dialog for uploading a file. One can upload from a local disk, from a url or just link to another file already uploaded to the wiki, depending on the permissions granted to the user. If the file is an image, a second page of the dialog allows one to set the parameters for how the file is displayed. On upload the width defaults to 300 and the format to 'thumb'. Double clicking an file embedded in the page will invoke the file upload dialog on it.
|- style="height: 31px;"
| [[File:Toggle placeholder button capture from TinyMCE extension.png|60px|border|Toggle placeholder button]]
| will toggle the display of visible placeholders for non-rendered new lines, switches, comments and on-breaking spaces.
|- style="height: 42px;"
| [[File:Non-breaking space button capture from TinyMCE extension.png|60px|border|Non-breaking space button]]
| will insert a non-breaking space into the content at the cursor position.
|- style="height: 76px;"
| [[File:No rendering new line button capture from TinyMCE extension.png|60px|border|No rendering new line button]]
| will insert a non rendering (single) new line into the content at the cursor position. These are used in formatting the raw wiki text but otherwise not displayed in the rendered html. If the language you use is 'right-to-left' the image on the bitton (and the visible placeholder if displayed) will be rotated around the vertical axis.
|- style="height: 96px;"
| [[File:Reference button capture from TinyMCE extension.png|60px|border|Reference button]]
| will insert a citation or reference into the content at the cursor position. If anything is selected when the button is pressed it will form the content of the reference. The reference is initially displayed as <sup style="color: rgb(0, 0, 0);">&#91;[n]&#93;</sup> in the editor. If one double clicks this placeholder the content of the reference is made available for editing in a box surrounded by a red line next to it. Double clicking the placeholder again will hide the reference content again. References can contain formatted text, but mustn't include other references. On saving, the placeholder will be replaced by the appropriate sequence number for the reference in the text.
|- style="height: 76px;"
| [[File:Comment button capture from TinyMCE extension.png|60px|border|Comment button]]
| will insert a comment into the content at the cursor position. If anything is selected when the button is pressed it will form the content of the comment. The comment is initially displayed as <sup style="color: #000000;">&#x1F4AC;</sup> in the editor. If one double clicks this placeholder the content of the comment is made available for editing in a box surrounded by a red line next to it. Double clicking the placeholder again will hide the comment content again. Comments are plain text only. Because comments are not displayed in the rendered page, display of comment placeholders can be toggled on or off using the [[File:Toggle placeholder button capture from TinyMCE extension.png|30px|border|Toggle placeholder button]] button.
|- style="height: 16px;"
| [[File:Template button capture two from TinyMCE extension.png|60px|border|Template button]]
| invokes a dialog for inserting TinyMCE templates (see [[#TinyMCE Templates|TinyMCE Templates]] above).
|- style="height: 95px;"
| [[File:Icon button capture from TinyMCE extension.png|60px|border|Icon button]]
| invokes a dialog for insert fontawesome symbols, if you have that plugin enabled. The plugin ships with the extension but isn't enabled by default. The second part of the example in [[#Using $wgTinyMCESettings to configure the TinyMCE editor|Using $wgTinyMCESettings to configure the TinyMCE editor]] above shows the settings for doing this in LocalSettings.php.
|- style="height: 174px;"
| [[File:Block markup options menu items capture from TinyMCE extension.png|200px|border|Block markup options menu items]]
| Selecting the format dropdown menu, provides some mediawiki specific formats. these are:
*''' Pre (without markup) '''- equivalent to &lt;pre&gt; block in wiki text
*'''Pre (with markup)''' - equivalent to a psuedo pre, formed by placing a space at the start of each line
*'''Code '''- equivalent to a wiki &lt;code&gt; block
*'''Nowiki''' - equivalent to a &lt;nowiki&gt; block
|}
 
<translate>
=== Placeholders === <!--T:8-->
</translate>
'''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 [[File:Toggle placeholder button capture from TinyMCE extension.png|30px|border|Toggle placeholder button]] button.
To edit their wiki code, select them and double click.
 
<translate>
=== Drag/drop copy/paste === <!--T:9-->
</translate>
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.
 
<translate>
=== Escaping from blocks at start and end of content === <!--T:10-->
</translate>
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.
 
<translate>
=== Keyboard shortcuts === <!--T:11-->
</translate>
{| class="wikitable" style="border-collapse: collapse"
|-
! Action
! PC
! Mac
! Core/Plugin
|-
| Bold
| {{Key press|Ctrl|B}}
| {{Key press|Command|B}}
| core
|-
| Italic
| {{Key press|Ctrl|I}}
| {{Key press|Command|I}}
| core
|-
| Underline
| {{Key press|Ctrl|U}}
| {{Key press|Command|U}}
| core
|-
| Select All
| {{Key press|Ctrl|A}}
| {{Key press|Command|A}}
| core
|-
| Redo
| {{Key press|Ctrl|Y}} / {{Key press|Ctrl|Shift|Z}}
| {{Key press|Command|Y}} / {{Key press|Command|Shift|Z}}
| core
|-
| Undo
| {{Key press|Ctrl|Z}}
| {{Key press|Command|Z}}
| core
|-
| Header 1
| {{Key press|Alt|Shift|1}}
| {{Key press|Ctrl|Option|1}}
| core
|-
| Header 2
| {{Key press|Alt|Shift|2}}
| {{Key press|Ctrl|Option|2}}
| core
|-
| Header 3
| {{Key press|Alt|Shift|3}}
| {{Key press|Ctrl|Option|3}}
| core
|-
| Header 4
| {{Key press|Alt|Shift|4}}
| {{Key press|Ctrl|Option|4}}
| core
|-
| Header 5
| {{Key press|Alt|Shift|5}}
| {{Key press|Ctrl|Option|5}}
| core
|-
| Header 6
| {{Key press|Alt|Shift|6}}
| {{Key press|Ctrl|Option|6}}
| core
|-
| Paragraph
| {{Key press|Alt|Shift|7}}
| {{Key press|Ctrl|Option|7}}
| core
|-
| Div
| {{Key press|Alt|Shift|8}}
| {{Key press|Ctrl|Option|8}}
| core
|-
| Address
| {{Key press|Alt|Shift|9}}
| {{Key press|Ctrl|Option|9}}
| core
|-
| Focus to menu bar
| {{Key press|Alt|F9}}
| {{Key press|Option|F9}}
| core
|-
| Focus to toolbar
| {{Key press|Alt|F10}}
| {{Key press|Option|F10}}
| core
|-
| Focus to element path
| {{Key press|Alt|F11}}
| {{Key press|Option|F11}}
| core
|-
| Focus to contextual toolbar
| {{Key press|Ctrl|F9}}
| {{Key press|Ctrl|F9}}
| core
|-
| Open the help dialog
| {{Key press|Alt|0}}
| {{Key press|Option|0}}
| [https://www.tiny.cloud/docs/plugins/help/ help]
|-
| Insert link
| {{Key press|Ctrl|K}}
| {{Key press|Command|K}}
| wikilink
|-
| Insert link
| {{Key press|Ctrl|[}}
| {{Key press|Command|[}}
| wikilink
|-
| Insert link
| {{Key press|Ctrl|]}}
| {{Key press|Command|]}}
| wikilink
|-
| Inser non-breaking space
| {{Key press|Ctrl|Space}}
| {{Key press|Command|Space}}
| wikinonbreakingspace
|-
| Insert Reference
| {{Key press|Ctrl|Shift|*}}
| {{Key press|Command|Shift|*}}
| wikireference
|-
| Toggle Fullscreen
| {{Key press|Ctrl|Shift|F}}
| {{Key press|Command|Shift|F}}
| [https://www.tiny.cloud/docs/plugins/fullscreen/ fullscreen]
|-
| Save
| {{Key press|Ctrl|S}}
| {{Key press|Command|S}}
| [https://www.tiny.cloud/docs/plugins/save/ save]
|-
| Find
| {{Key press|Ctrl|F}}
| {{Key press|Command|F}}
| [https://www.tiny.cloud/docs/plugins/searchreplace/ searchreplace]
|-
| Insert paragraph after block
| {{Key press|Ctrl|Return}}
| {{Key press|Command|Return}}
| wikiparser
|-
| Insert paragraph after block
| {{Key press|Shift|Alt|Return}}
| {{Key press|Ctrl|Option|Return}}
| wikiparser
|}
<strong> Accessibility shortcuts</strong>
<p>This is a list of available keyboard shortcuts within the editor user interface.</p>
 
 
{| class="wikitable" style="border-collapse: collapse;" thead=""
|-
! Action
! PC
! Mac
|-
| Execute command
| {{Key press|Enter}} / {{Key press|Space}}
| {{Key press|Enter}} / {{Key press|Space}}
|-
| Focus on next UI Element<br/>(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)
| {{Key press|Tab}}
| {{Key press|Tab}}
|-
| Focus on previous UI Element<br/>(such as: Menu bar, Toolbar, Toolbar Group, Status Bar Item)
| {{Key press|Shift|Tab}}
| {{Key press|Shift|Tab}}
|-
| Focus next Control<br/>(such as: toolbar button, menu, or menu item)
| {{Key press|→}} / {{Key press|↓}}
| {{Key press|→}} / {{Key press|↓}}
|-
| Focus previous Control<br/>(such as: toolbar button, menu, or menu item)
| {{Key press|←}} / {{Key press|↑}}
| {{Key press|←}} / {{Key press|↑}}
|-
| Open menu or toolbar menu button
| {{Key press|↓}} / {{Key press|Space}}
| {{Key press|↓}} / {{Key press|Space}}
|-
| Open group toolbar button
| {{Key press|Space}}
| {{Key press|Space}}
|-
| Open split toolbar button
| {{Key press|↓}}
| {{Key press|↓}}
|-
| Open the popup menu on split toolbar buttons
| {{Key press|Shift|Enter}}
| {{Key press|Shift|Enter}}
|-
| Open submenu
| {{Key press|→}}
| {{Key press|→}}
|-
| Close submenu
| {{Key press|←}} / {{Key press|Esc}}
| {{Key press|←}} / {{Key press|Esc}}
|-
| Close dialog
| {{Key press|Esc}}
| {{Key press|Esc}}
|-
| Close menu
| {{Key press|Esc}}
| {{Key press|Esc}}
|-
| Move focus back to editor body
| {{Key press|Esc}}
| {{Key press|Esc}}
|}
 
=== 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:
{| class="wikitable"
|+
! Plugin name
! Notes
|-
| fontawesome
| This is based on the fontawesome plugin for TinyMCE created by Josh Hunt (<nowiki>https://github.com/josh18/TinyMCE-FontAwesome-Plugin</nowiki>). There is an [[File:Icon button capture from TinyMCE extension.png|30px|border|Icon button]] icon added to the TinyMCE toolbar which allows the user to insert a fontawesome icon into the page. In order for mediawiki to display these icons on the wiki page the following should be inserted at the top of the mediawiki:common.css page in the wiki:
<source lang=css>
@import url("extensions/TinyMCE/tinymce/plugins/fontawesome/css/font-awesome.min.css");
</source>
|}
 
==Authors and credits==
The TinyMCE extension of course includes the [https://www.tinymce.com/ TinyMCE] JavaScript-based editor, created by [https://www.ephox.com/about/ Ephox Corporation].
This extension is based on the [[Extension:VisualEditor (BlueSpice)|BlueSpice VisualEditor]] extension (not to be confused with the standard [[Extension:VisualEditor|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 [[Extension:Page Forms|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 [https://www.wikibase-solutions.com/ Wikibase bv], who helped with extensive testing and encouragement to be more ambitious with the functionality.
 
{{Used by}}
 
[[Category:WYSIWYG extensions{{#translation:}}]]

Latest revision as of 19:14, 7 February 2024

Retrieved from "https://everyprocedure.com/index.php?title=Main_Page&oldid=49"