-
Notifications
You must be signed in to change notification settings - Fork 220
DOC-3201: Update TinyMCE for touch-enabled and mobile devices page. #3690
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 3 commits
Commits
Show all changes
4 commits
Select commit
Hold shift + click to select a range
54088e2
DOC-3201: Update TinyMCE for touch-enabled and mobile devices page.
kemister85 7f2db59
DOC-3201: Restructure, copy edits and re-wording various contexts to …
kemister85 9eed294
DOC-3201: Remove unsupported plugins from mobile limitations section.
kemister85 44bae0a
Update modules/ROOT/partials/misc/admon-mobile-context-menus.adoc
kemister85 File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,75 +1,108 @@ | ||
| = TinyMCE for touch-enabled and mobile devices | ||
| = TinyMCE for Touch-Enabled and Mobile Devices | ||
| :navtitle: TinyMCE for mobile | ||
| :description: The TinyMCE rich text editing experience for mobile devices. | ||
| :keywords: mobile, tablet, phone | ||
|
|
||
| The mobile experience for {productname} is enabled by default and has the following differences when compared to the "desktop" experience: | ||
| The mobile editing experience for {productname} is enabled by default. It differs from the desktop version in several key ways to provide a responsive and touch-optimized interface: | ||
|
|
||
| * Horizontal contextual menus on mobile. | ||
| * Side-scrolling toolbars and contextual menus on mobile. | ||
| * Contextual keyboard options for dialogs using xref:dialog-components.adoc#inputmode[`+inputMode+`]. | ||
| * xref:mobile-defaults-for-selected-options[Mobile defaults for selected options]. | ||
| * Horizontal and side-scrolling toolbars and contextual menus. | ||
| * Context-sensitive keyboard behavior using xref:dialog-components.adoc#inputmode[`+inputMode+`]. | ||
| * Predefined mobile-specific default values for selected configuration options. | ||
| * Touch gestures for accessing the context menu, depending on platform. | ||
|
|
||
| The mobile experience allows most of the {productname} plugins to work on mobile devices, except for: | ||
| {productname} automatically detects the platform and displays an optimal UI based on screen size and device type. | ||
|
|
||
| * xref:introduction-to-tiny-comments.adoc[Comments]. | ||
| * xref:editimage.adoc[Image Editing]. | ||
| * xref:moxiemanager.adoc[MoxieManager]. | ||
| * xref:permanentpen.adoc[Permanent Pen]. | ||
| [TIP] | ||
| ==== | ||
| The native context menu remains accessible on mobile devices even when a custom {productname} context menu is configured. On iOS, this is done with a _single tap_; on Android, a _double tap_ is required. If the xref:contextmenu.adoc#contextmenu_never_use_native[`+contextmenu_never_use_native+`] option is enabled, native menu access is disabled on both platforms. | ||
| ==== | ||
|
|
||
| {productname} will detect the platform and show an optimal UI experience based on the device type and screen size. | ||
|
|
||
| NOTE: iPads do not use the `+mobile+` part of the {productname} init configuration. This is due to a constraint added by Apple to return the environment as a "desktop environment" for iPads. iPad users will receive the other changes to touch functionality, such as context toolbars and context menus. | ||
| NOTE: iPads are treated as desktop-class devices due to Apple's environment constraints. While the `+mobile+` configuration will not apply on iPads, touch interactions such as context toolbars and menus will still behave as expected. | ||
|
|
||
| include::partial$misc/admon-mobile-context-menus.adoc[] | ||
|
|
||
| include::partial$misc/mobile-platform-compatibility.adoc[] | ||
|
|
||
| == Configuring mobile | ||
| == Mobile Plugin Limitations | ||
|
|
||
| Some plugins offer limited functionality or are unsupported when used on mobile devices, particularly in inline mode. | ||
|
|
||
| === Known Plugin Limitations | ||
|
|
||
| [cols="1,3", options="header"] | ||
| |=== | ||
| |Feature | ||
| |Limitation | ||
|
|
||
| |xref:editimage.adoc[Image Editing] | ||
| |Image resizing is only available through the Edit Image dialog; in-editor resizing is not supported. | ||
|
|
||
| |xref:introduction-to-powerpaste.adoc[PowerPaste] | ||
| |Clipboard restrictions on mobile platforms prevent core PowerPaste functionality. | ||
| |=== | ||
|
|
||
| === Unsupported Plugins on Mobile | ||
|
|
||
| [cols="1,3", options="header"] | ||
| |=== | ||
| |Feature | ||
| |Limitation | ||
|
|
||
| Add the following `+meta+` tag to the `+head+` of pages using {productname} to ensure the mobile user interface functions as intended. | ||
| |xref:introduction-to-tiny-comments.adoc[Comments] | ||
| |Not supported in inline mode on mobile devices. | ||
|
|
||
| |xref:moxiemanager.adoc[MoxieManager] | ||
| |Not supported in inline mode. | ||
|
|
||
| |xref:permanentpen.adoc[Permanent Pen] | ||
| |Not supported due to UX constraints on mobile. | ||
|
|
||
| |xref:advcode.adoc[Enhanced Code Editor] | ||
| |Dialog interface is not usable in mobile viewports. | ||
|
|
||
| |xref:footnotes.adoc[Footnotes] | ||
| |Inserted footnote links are not clickable after insertion. | ||
| |=== | ||
|
|
||
| == Configuring Mobile Behavior | ||
|
|
||
| To ensure the {productname} mobile UI functions correctly, include the following `+meta+` tag in the `+<head>+` of your HTML: | ||
|
|
||
| [source,html] | ||
| ---- | ||
| <meta name="viewport" content="width=device-width, initial-scale=1"> | ||
| ---- | ||
|
|
||
| To set mobile specific options, add the option to xref:themobileoption[the `+mobile+` option] configuration, such as: | ||
| To customize behavior on mobile devices, use the `+mobile+` configuration option. For example: | ||
|
|
||
| [source,js] | ||
| ---- | ||
| tinymce.init({ | ||
| selector: 'textarea', // change this value according to your HTML | ||
| selector: 'textarea', // Adjust this value to match your HTML | ||
| mobile: { | ||
| menubar: true | ||
| } | ||
| }); | ||
| ---- | ||
|
|
||
| [[mobile-defaults-for-selected-options]] | ||
| === Mobile defaults for selected options | ||
|
|
||
| These mobile-specific default values have been set to disable unsupported options for mobile devices or to provide the best experience without configuration from developers. | ||
| == Mobile-Specific Defaults | ||
|
|
||
| The following options have mobile-specific default values: | ||
| The following options are automatically set to provide a better experience on mobile devices: | ||
|
|
||
| * xref:menus-configuration-options.adoc#menubar[`+menubar+`] - defaults to `+false+` on mobile phones. | ||
| * xref:toolbar-configuration-options.adoc#toolbar_mode[`+toolbar_mode+`] - defaults to `+scrolling+` on mobile devices. The toolbar will side-scroll by default. | ||
| * xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`] - Sticky Toolbar is not supported on mobile devices and defaults to `+false+`. | ||
| * xref:table.adoc#table_grid[`+table_grid+`] - Table grid is not supported on mobile devices and defaults to `+false+`. When creating tables on mobile, a dialog is shown instead of the table grid. | ||
| * xref:editor-size-options.adoc#resize[`+resize+`] - Resizing is not supported on mobile devices and defaults to `+false+`. | ||
| * xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`] - Object resizing is not supported on mobile devices and defaults to `+false+`. | ||
| * xref:menus-configuration-options.adoc#menubar[`+menubar+`] — Defaults to `+false+` on mobile phones. | ||
| * xref:toolbar-configuration-options.adoc#toolbar_mode[`+toolbar_mode+`] — Defaults to `+scrolling+`; enables side-scrolling toolbars. | ||
| * xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`] — Defaults to `+false+`; sticky toolbars are not supported. | ||
| * xref:table.adoc#table_grid[`+table_grid+`] — Defaults to `+false+`; a dialog replaces the table grid. | ||
| * xref:editor-size-options.adoc#resize[`+resize+`] — Defaults to `+false+`; in-editor resizing is disabled. | ||
| * xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`] — Defaults to `+false+`; object resizing is not supported. | ||
|
|
||
| === Unsupported options for mobile | ||
| == Unsupported Configuration Options | ||
|
|
||
| The following options are not supported on mobile devices: | ||
| The following configuration options are not applicable or functional on mobile devices: | ||
|
|
||
| * xref:use-tinymce-inline.adoc[Inline editing mode]. | ||
| * xref:use-tinymce-distraction-free.adoc[Distraction-free editing mode]. | ||
| * xref:inline-editor-options.adoc#inline[`+inline+`]. | ||
| * xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`]. | ||
| * xref:table.adoc#table_grid[`+table_grid+`]. | ||
| * xref:editor-size-options.adoc#resize[`+resize+`]. | ||
| * xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`]. | ||
| * xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`] | ||
| * xref:table.adoc#table_grid[`+table_grid+`] | ||
| * xref:editor-size-options.adoc#resize[`+resize+`] | ||
| * xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`] | ||
|
|
||
| include::partial$configuration/mobile.adoc[] | ||
| include::partial$configuration/mobile.adoc[] |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,3 +1 @@ | ||
| NOTE: When a {productname} context menu is configured, a user on a mobile device can access the {productname} context menu by a _long press_. However, when a {productname} context menu is not configured but a {productname} context toolbar is, _long press_ will instead open the context toolbar. | ||
|
|
||
| IMPORTANT: The native context menu on a mobile device can still be accessed with a {productname} context menu configured, either by a _single tap_ on iOS, or by a _double tap_ on Android. However if the `+contextmenu_never_use_native+` option is enabled, neither _single_ nor _double tap_ will have any effect. | ||
| NOTE: When a {productname} context menu is configured, a user on a mobile device can access the {productname} context menu by a _long press_. However, when a {productname} context menu is not configured but a {productname} context toolbar is, _long press_ will instead open the context toolbar. | ||
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.