Skip to content

Commit 791c47b

Browse files
kemister85kimwoodfield
kemister85
and
kimwoodfield
authored
DOC-3201: Update TinyMCE for touch-enabled and mobile devices page. (#3690)
* DOC-3201: Update TinyMCE for touch-enabled and mobile devices page. * DOC-3201: Restructure, copy edits and re-wording various contexts to simplify document. * DOC-3201: Remove unsupported plugins from mobile limitations section. * Update modules/ROOT/partials/misc/admon-mobile-context-menus.adoc Co-authored-by: Kim <[email protected]> --------- Co-authored-by: Kim <[email protected]>
1 parent d450064 commit 791c47b

File tree

2 files changed

+73
-42
lines changed

2 files changed

+73
-42
lines changed

‎modules/ROOT/pages/tinymce-for-mobile.adoc‎

Lines changed: 72 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,75 +1,108 @@
1-
= TinyMCE for touch-enabled and mobile devices
1+
= TinyMCE for Touch-Enabled and Mobile Devices
22
:navtitle: TinyMCE for mobile
33
:description: The TinyMCE rich text editing experience for mobile devices.
44
:keywords: mobile, tablet, phone
55

6-
The mobile experience for {productname} is enabled by default and has the following differences when compared to the "desktop" experience:
6+
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:
77

8-
* Horizontal contextual menus on mobile.
9-
* Side-scrolling toolbars and contextual menus on mobile.
10-
* Contextual keyboard options for dialogs using xref:dialog-components.adoc#inputmode[`+inputMode+`].
11-
* xref:mobile-defaults-for-selected-options[Mobile defaults for selected options].
8+
* Horizontal and side-scrolling toolbars and contextual menus.
9+
* Context-sensitive keyboard behavior using xref:dialog-components.adoc#inputmode[`+inputMode+`].
10+
* Predefined mobile-specific default values for selected configuration options.
11+
* Touch gestures for accessing the context menu, depending on platform.
1212
13-
The mobile experience allows most of the {productname} plugins to work on mobile devices, except for:
13+
{productname} automatically detects the platform and displays an optimal UI based on screen size and device type.
1414

15-
* xref:introduction-to-tiny-comments.adoc[Comments].
16-
* xref:editimage.adoc[Image Editing].
17-
* xref:moxiemanager.adoc[MoxieManager].
18-
* xref:permanentpen.adoc[Permanent Pen].
15+
[TIP]
16+
====
17+
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.
18+
====
1919

20-
{productname} will detect the platform and show an optimal UI experience based on the device type and screen size.
21-
22-
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.
20+
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.
2321

2422
include::partial$misc/admon-mobile-context-menus.adoc[]
2523

2624
include::partial$misc/mobile-platform-compatibility.adoc[]
2725

28-
== Configuring mobile
26+
== Mobile Plugin Limitations
27+
28+
Some plugins offer limited functionality or are unsupported when used on mobile devices, particularly in inline mode.
29+
30+
=== Known Plugin Limitations
31+
32+
[cols="1,3", options="header"]
33+
|===
34+
|Feature
35+
|Limitation
36+
37+
|xref:editimage.adoc[Image Editing]
38+
|Image resizing is only available through the Edit Image dialog; in-editor resizing is not supported.
39+
40+
|xref:introduction-to-powerpaste.adoc[PowerPaste]
41+
|Clipboard restrictions on mobile platforms prevent core PowerPaste functionality.
42+
|===
43+
44+
=== Unsupported Plugins on Mobile
45+
46+
[cols="1,3", options="header"]
47+
|===
48+
|Feature
49+
|Limitation
2950

30-
Add the following `+meta+` tag to the `+head+` of pages using {productname} to ensure the mobile user interface functions as intended.
51+
|xref:introduction-to-tiny-comments.adoc[Comments]
52+
|Not supported in inline mode on mobile devices.
53+
54+
|xref:moxiemanager.adoc[MoxieManager]
55+
|Not supported in inline mode.
56+
57+
|xref:permanentpen.adoc[Permanent Pen]
58+
|Not supported due to UX constraints on mobile.
59+
60+
|xref:advcode.adoc[Enhanced Code Editor]
61+
|Dialog interface is not usable in mobile viewports.
62+
63+
|xref:footnotes.adoc[Footnotes]
64+
|Inserted footnote links are not clickable after insertion.
65+
|===
66+
67+
== Configuring Mobile Behavior
68+
69+
To ensure the {productname} mobile UI functions correctly, include the following `+meta+` tag in the `+<head>+` of your HTML:
3170

3271
[source,html]
3372
----
3473
<meta name="viewport" content="width=device-width, initial-scale=1">
3574
----
3675

37-
To set mobile specific options, add the option to xref:themobileoption[the `+mobile+` option] configuration, such as:
76+
To customize behavior on mobile devices, use the `+mobile+` configuration option. For example:
3877

3978
[source,js]
4079
----
4180
tinymce.init({
42-
selector: 'textarea', // change this value according to your HTML
81+
selector: 'textarea', // Adjust this value to match your HTML
4382
mobile: {
4483
menubar: true
4584
}
4685
});
4786
----
4887

49-
[[mobile-defaults-for-selected-options]]
50-
=== Mobile defaults for selected options
51-
52-
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.
88+
== Mobile-Specific Defaults
5389

54-
The following options have mobile-specific default values:
90+
The following options are automatically set to provide a better experience on mobile devices:
5591

56-
* xref:menus-configuration-options.adoc#menubar[`+menubar+`] - defaults to `+false+` on mobile phones.
57-
* xref:toolbar-configuration-options.adoc#toolbar_mode[`+toolbar_mode+`] - defaults to `+scrolling+` on mobile devices. The toolbar will side-scroll by default.
58-
* xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`] - Sticky Toolbar is not supported on mobile devices and defaults to `+false+`.
59-
* 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.
60-
* xref:editor-size-options.adoc#resize[`+resize+`] - Resizing is not supported on mobile devices and defaults to `+false+`.
61-
* xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`] - Object resizing is not supported on mobile devices and defaults to `+false+`.
92+
* xref:menus-configuration-options.adoc#menubar[`+menubar+`] — Defaults to `+false+` on mobile phones.
93+
* xref:toolbar-configuration-options.adoc#toolbar_mode[`+toolbar_mode+`] — Defaults to `+scrolling+`; enables side-scrolling toolbars.
94+
* xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`] — Defaults to `+false+`; sticky toolbars are not supported.
95+
* xref:table.adoc#table_grid[`+table_grid+`] — Defaults to `+false+`; a dialog replaces the table grid.
96+
* xref:editor-size-options.adoc#resize[`+resize+`] — Defaults to `+false+`; in-editor resizing is disabled.
97+
* xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`] — Defaults to `+false+`; object resizing is not supported.
6298

63-
=== Unsupported options for mobile
99+
== Unsupported Configuration Options
64100

65-
The following options are not supported on mobile devices:
101+
The following configuration options are not applicable or functional on mobile devices:
66102

67-
* xref:use-tinymce-inline.adoc[Inline editing mode].
68-
* xref:use-tinymce-distraction-free.adoc[Distraction-free editing mode].
69-
* xref:inline-editor-options.adoc#inline[`+inline+`].
70-
* xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`].
71-
* xref:table.adoc#table_grid[`+table_grid+`].
72-
* xref:editor-size-options.adoc#resize[`+resize+`].
73-
* xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`].
103+
* xref:toolbar-configuration-options.adoc#toolbar_sticky[`+toolbar_sticky+`]
104+
* xref:table.adoc#table_grid[`+table_grid+`]
105+
* xref:editor-size-options.adoc#resize[`+resize+`]
106+
* xref:content-behavior-options.adoc#object_resizing[`+object_resizing+`]
74107

75-
include::partial$configuration/mobile.adoc[]
108+
include::partial$configuration/mobile.adoc[]

‎modules/ROOT/partials/misc/admon-mobile-context-menus.adoc‎

Lines changed: 1 addition & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1 @@
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.
2-
3-
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.
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 open the context toolbar instead.

0 commit comments

Comments
 (0)