DOC-3329: re-factor enhanced skins and icon pack page, partials and update references for NPM.

kemister85 · kemister85 · commit 18b4deb356ac · 2025-11-27T15:50:52.000+10:00
diff --git a/modules/ROOT/pages/editor-skin.adoc b/modules/ROOT/pages/editor-skin.adoc
@@ -8,7 +8,7 @@
 ====
 *Skins vs Content CSS:*
 
-Skins change both the look of {productname}'s UI and the editable area. To change only the look of the editable area, use xref:add-css-options.adoc#content_css[`+content_css+`].
+Skins change both the look of {productname}'s UI and the editable area (when the skin includes both `+skin.css+` and `+content.css+` files). The `+content_css+` option only styles the editable area. If both `+skin+` and `+content_css+` are used, `+content_css+` will override the skin's content styles, allowing mixing and matching of UI and content styles.
 ====
 
 The default skin does not require any configuration, though it must be imported when bundling for deployment:
diff --git a/modules/ROOT/pages/enhanced-skins-and-icon-packs.adoc b/modules/ROOT/pages/enhanced-skins-and-icon-packs.adoc
@@ -1,79 +1,99 @@
 = Enhanced Skins & Icon Packs
 :navtitle: Enhanced Skins & Icon Packs
-:description: Quickly give TinyMCE a new look.
+:description: Premium skins and icon packs for TinyMCE.
 :keywords: skin, skins, icon, icons, material, bootstrap, customize, theme
 
-The {prem_skins_icons} lets you quickly give {productname} a new look. Just choose one of our pre-made skins and icon packs.
+NOTE: Enhanced skins are only available with a link:{pricingpage}/[paid {productname} subscription].
 
-== How to use a Enhanced skins
+The {prem_skins_icons} provide pre-made skins and icon packs to quickly customize {productname}'s appearance. These premium options allow integrators to match {productname} to their application's design system.
 
-NOTE: Enhanced skins are only available with a link:{pricingpage}/[paid {productname} subscriptions].
+== Available premium skins
 
-Use the xref:editor-skin.adoc#skin[skin] option, in combination with the xref:add-css-options.adoc#content_css[content_css] option and the values listed below.
+The following premium skins are available for {productname}:
 
-Available values for xref:editor-skin.adoc#skin[skins]:
+* `material-classic`
+* `material-outline`
+* `bootstrap`
+* `fabric`
+* `fluent`
+* `borderless`
+* `small`
+* `jam`
+* `naked`
+* `outside`
+* `snow`
 
-* material-classic
-* material-outline
-* bootstrap
-* fabric
-* fluent
-* borderless
-* small
-* jam
-* naked
-* outside
-* snow
+For information on configuring skins, see: xref:editor-skin.adoc[Skin options].
 
-Available values for xref:add-css-options.adoc#content_css[content_css]:
+Some skins include both UI styles (`+skin.css+`) and content styles (`+content.css+`). When a skin includes both files, using the `+skin+` option will apply both UI and content styles. The `+content_css+` option is not required in this case.
 
-* material-classic
-* material-outline
-* fabric
-* fluent
+For styling only the editable area (without changing the UI), separate content-only CSS files are available. These files are located in the content folder and may differ from the content styles included with skins. Available content-only options:
 
-=== Example: using a Enhanced skin
+* `material-classic`
+* `material-outline`
+* `fabric`
+* `fluent`
+
+Use the xref:add-css-options.adoc#content_css[`+content_css+`] option to apply content-only styles.
+
+Skins can include both UI styles (`+skin.css+`) and content styles (`+content.css+`). Using the `+skin+` option applies both automatically when both files are present.
+
+For styling only the editable area (without changing the UI), separate content-only CSS files are available. These files are located in the content folder and may differ from the content styles included with skins. Available content-only options:
+
+* `material-classic`
+* `material-outline`
+* `fabric`
+* `fluent`
+
+Use the xref:add-css-options.adoc#content_css[`+content_css+`] option to apply content-only styles.
+
+=== Example: using a premium skin
 
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your HTML
-  skin: 'fabric',        // Name of the skin
-  content_css: 'fabric'  // Name of the content skin
+  selector: 'textarea',
+  skin: 'fabric'  // Applies both UI and content styles (if both files are included)
 });
 ----
 
-== How to use an icon pack
+[NOTE]
+====
+*Mixing skins and content_css:*
+
+The `+content_css+` option is not required when using skins that include content styles. However, if both `+skin+` and `+content_css+` are specified, `+content_css+` will override the skin's content styles, allowing mixing and matching of UI and content styles.
+====
+
+== Available premium icon packs
 
-Use the xref:editor-icons.adoc#icons[icons] option with any of the values listed below.
+The following premium icon packs are available for {productname}:
 
-Available values for xref:editor-icons.adoc#icons[icon] packs:
+* `bootstrap`
+* `material`
+* `small`
+* `jam`
+* `thin`
 
-* bootstrap
-* material
-* small
-* jam
-* thin
+For information on configuring icon packs, see: xref:editor-icons.adoc[Icon options].
 
 === Example: using a premium icon pack
 
 [source,js]
 ----
 tinymce.init({
-  selector: 'textarea',  // change this value according to your HTML
+  selector: 'textarea',
   icons: 'material'      // Name of icon pack
 });
 ----
 
-For information on using the `+icons+` option, see: xref:editor-icons.adoc#icons[User interface options - `+icons+`].
+[[icon-pack-compatibility-matrix]]
+== Icon pack compatibility matrix
 
-=== Icon pack compatibility matrix
-
-Due to different toolbar button sizes, some icon packs fit better with some skins. Use the below matrix as a guide.
+Due to different toolbar button sizes, some icon packs fit better with some skins. Use the compatibility matrix below as a guide when selecting combinations.
 
 [cols="1,3",options="header"]
 |===
-|Skin |Compatible Icon pack
+|Skin |Compatible Icon packs
 |material-classic |bootstrap, material, jam, small, thin
 |material-outline |bootstrap, material, jam, small, thin
 |bootstrap |bootstrap, material, jam, small, thin
@@ -89,7 +109,7 @@ Due to different toolbar button sizes, some icon packs fit better with some skin
 
 == Examples
 
-Below are some recommended combinations of skins and icon packs:
+Below are interactive demos showing recommended combinations of skins and icon packs:
 
 * xref:bootstrap-demo.adoc[Bootstrap skin]
 * xref:material-outline-demo.adoc[Material Outline skin with Material icon pack]
@@ -103,13 +123,3 @@ Below are some recommended combinations of skins and icon packs:
 * xref:outside-demo.adoc[Outside editor]
 * xref:snow-demo.adoc[Snow editor]
 * xref:custom-icon-pack-demo.adoc[Custom Icon Pack Demo]
-
-////
-:pluginname: Tiny Skins and Icon
-:pluginminimumplan: tiertwo
-:extensionType: Packs
-:pluralExtensionType: true
-include::partial$misc/purchase-premium-plugins.adoc[]
-:!extensionType:
-:!pluralExtensionType:
-////
diff --git a/modules/ROOT/partials/configuration/language_url.adoc b/modules/ROOT/partials/configuration/language_url.adoc
@@ -3,9 +3,29 @@
 
 When using the xref:ui-localization.adoc#language[`+language+`] option to set the user interface language you can place language pack(s) in a directory other than the default. If you do this, however, you must add the `language_url` option to your configuration and set this option to a path pointing to the language file(s) location.
 
-We recommend the path URL be relative to the web application’s root. That is, begin with the absolute path reference character `+/+`. Avoid relying on application context for safe path resolution of language packs.
+We recommend the path URL be relative to the web application's root. That is, begin with the absolute path reference character `+/+`. Avoid relying on application context for safe path resolution of language packs.
 
-Also, the `+language+` option must also be set and must be set to the name of the language pack file being loaded.
+[IMPORTANT]
+====
+*Understanding `language_url` and `language` Together:*
+
+When using `language_url`, you must also specify the `language` option:
+
+* `language_url` - Tells {productname} *where* to find the language pack file.
+* `language` - Tells {productname} *which* language pack to use from the loaded file.
+
+*Example:*
+
+[source,js]
+----
+tinymce.init({
+  selector: 'textarea',
+  language_url: '/path/to/language_pack/fi.js', // Where to find it
+  language: 'fi',  // Which language pack to use
+  // ... other options
+});
+----
+====
 
 *Type:* `+String+`
 
diff --git a/modules/ROOT/partials/misc/language-or-language_url.adoc b/modules/ROOT/partials/misc/language-or-language_url.adoc
@@ -1,4 +1,4 @@
-There are two options for changing the language of the {productname} user interfaces: `+language+` and `+language_url+`. 
+There are two options for changing the language of the {productname} user interfaces: `+language+` and `+language_url+`.
 
 * Use the `+language+` option when language packs are in the default location (for {cloudname} deployments, ZIP bundles, or when using NPM packages with bundling or file layering).
-* Use the `+language_url+` option to specify a custom path to language packs, which is useful for community translations, custom language packs, or when using NPM packages without bundling.
+* Use the `+language_url+` option to specify a custom path to language packs, which is useful for community translations, custom language packs, or when using NPM packages without bundling. When using `+language_url+`, the `+language+` option is also required.
diff --git a/modules/ROOT/partials/misc/skin-or-skin_url.adoc b/modules/ROOT/partials/misc/skin-or-skin_url.adoc
@@ -17,12 +17,12 @@ To load skins from another location, integrators must specify that location usin
 ====
 *Understanding the skins folder structure:*
 
-The **skins** folder in the `+tinymce-premium+` NPM package and ZIP bundles contains both a **ui** folder and a **content** folder. The files within the **content** folder are for use with the xref:add-css-options.adoc#content_css[`+content_css+`] option, and only affect the editable area. They do not work with the `+skin+` or `+skin_url+` options.
+The **skins** folder in the `+tinymce-premium+` NPM package and ZIP bundles contains both a **ui** folder and a **content** folder. Skins in the **ui** folder can include both `+skin.css+` (for UI styling) and `+content.css+` (for editable area styling). When a skin includes both files, using the `+skin+` option will apply both UI and content styles. The files in the **content** folder can also be used independently with the xref:add-css-options.adoc#content_css[`+content_css+`] option to style only the editable area.
 ====
 
 [NOTE]
 ====
-*Content CSS Override:*
+*Using skins and content_css together:*
 
-`+content_css+` will override any content styles set by UI skins.
+Skins that include both `+skin.css+` and `+content.css+` files will style both the UI and the editable area. The `+content_css+` option is not required when using such skins. However, if both `+skin+` and `+content_css+` are specified, `+content_css+` will override the skin's content styles, allowing mixing and matching of UI and content styles.
 ====
