Merge branch 'tinymce/7' into hotfix/7/DOC-3180

kemister85 · web-flow · commit 5b177ea1e430 · 2025-05-14T10:27:24.000+10:00
diff --git a/modules/ROOT/pages/7.7.0-release-notes.adoc b/modules/ROOT/pages/7.7.0-release-notes.adoc
@@ -372,7 +372,7 @@ This issue has been resolved in {productname} {release-version}. Input elements
 
 This section describes issues that users of {productname} {release-version} may encounter and possible workarounds for these issues.
 
-There one known issue in {productname} {release-version}.
+There is one known issue in {productname} {release-version}.
 
 === Missing Hebrew translation for Blockquote toolbar button tooltip
 // #TINY-11732
diff --git a/modules/ROOT/pages/tinymce-for-mobile.adoc b/modules/ROOT/pages/tinymce-for-mobile.adoc
@@ -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[]
diff --git a/modules/ROOT/pages/use-tinymce-inline.adoc b/modules/ROOT/pages/use-tinymce-inline.adoc
@@ -6,8 +6,6 @@
 
 {productname} has three main integration modes: a _classic_ full editor mode, an _inline_ editing mode, and a distraction-free mode.
 
-include::partial$misc/admon-not-on-mobile.adoc[]
-
 The inline editing mode is used for merging the editing and reading views of the page for a seamless editing experience and true WYSIWYG behavior.
 
 Inline editing mode does not replace the selected element with an iframe, but instead edits the element's content in-place. Inline editors are designed:
diff --git a/modules/ROOT/partials/individually-licensed-components/import-from-word-and-export-to-word/import-from-word-and-export-to-word-autorization-on-premises.adoc b/modules/ROOT/partials/individually-licensed-components/import-from-word-and-export-to-word/import-from-word-and-export-to-word-autorization-on-premises.adoc
@@ -6,7 +6,7 @@ To enable authorization, set the `SECRET_KEY` environment variable during the xr
 If the `SECRET_KEY` variable is set, then all requests must have a header with a JWT (JSON Web Token) signed with this key. The token should be passed as a value of the `Authorization` header for each request sent to the {pluginname} REST API.
 
 [NOTE]
-If the `SECRET_KEY` is not setup during the installation, then {pluginname} On-Premises will not require any headers with tokens when sending requests to the {pluginname} REST API. However, this it is not recommend to skip the authorization when running {pluginname} On-Premises in a public network.
+If the `SECRET_KEY` is not setup during the installation, then {pluginname} On-Premises will not require any headers with tokens when sending requests to the {pluginname} REST API. However, it is **not** recommended to skip the authorization when running {pluginname} On-Premises in a public network.
 
 === Generating the token
 
diff --git a/modules/ROOT/partials/integrations/blazor-tech-ref.adoc b/modules/ROOT/partials/integrations/blazor-tech-ref.adoc
@@ -123,7 +123,7 @@ Set the editor to inline mode.
 
 === `Disable`
 
-Set the editor to readonly mode.
+Sets the editor to a disable state.
 
 *Type:* `+Boolean+`
 
@@ -139,6 +139,24 @@ Set the editor to readonly mode.
 <button @onclick="@(() => disable = !disable)">Toggle</button>
 ----
 
+=== `Readonly`
+
+Sets the editor to readonly mode.
+
+*Type:* `+Boolean+`
+
+*Default value:* `+false+`
+
+==== Example using Readonly
+
+[source,cs]
+----
+<Editor
+  Readonly=@readonly
+/>
+<button @onclick="@(() => readonly = !readonly)">Toggle</button>
+----
+
 === `JsConfSrc`
 
 Use a JS object as base configuration for the editor by specifying the path to the object relative to the window object.
diff --git a/modules/ROOT/partials/integrations/jquery-quick-start.adoc b/modules/ROOT/partials/integrations/jquery-quick-start.adoc
@@ -99,12 +99,33 @@ endif::[]
 in the jQuery prefix, and any other settings are defined in the object passed to
 the `tinymce` method.
 +
+ifeval::["{productSource}" == "cloud"]
+[source,html]
+----
+<script>
+  $('textarea#tiny').tinymce({
+    height: 500,
+    api_key: '<your api key>',
+    /* other settings... */,
+  });
+</script>
+----
+. Update the `+api_key+` property to include your link:{accountsignup}/[{cloudname} API key].
+endif::[]
+
+ifeval::["{productSource}" == "package-manager"]
 [source,html]
 ----
 <script>
-  $('textarea#tiny').tinymce({ height: 500, /* other settings... */ });
+  $('textarea#tiny').tinymce({
+    height: 500,
+    license_key: '<your license key>',
+    /* other settings... */,
+  });
 </script>
 ----
+. Update the `+license_key+` property and include your xref:license-key.adoc[License Key].
+endif::[]
 
 == Example jQuery integration
 
@@ -128,6 +149,7 @@ ifeval::["{productSource}" == "package-manager"]
     <script>
       $('textarea#tiny').tinymce({
         height: 500,
+        license_key: '<your-license-key>',
         menubar: false,
         plugins: [
           'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
@@ -169,6 +191,7 @@ ifeval::["{productSource}" == "cloud"]
     <script>
       $('textarea#tiny').tinymce({
         height: 500,
+        api_key: '<your api key>',
         menubar: false,
         plugins: [
           'advlist', 'autolink', 'lists', 'link', 'image', 'charmap', 'preview',
diff --git a/modules/ROOT/partials/misc/admon-mobile-context-menus.adoc b/modules/ROOT/partials/misc/admon-mobile-context-menus.adoc
@@ -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 open the context toolbar instead.
