DOC-3329: Premium Plugins Installation and Bundling Documentation for NPM #3928
Conversation
kemister85 added the upcoming release kemister85 requested review from ShiridiGandham, jscasca, ltrouton, metricjs and tiny-ben-tran 
 Should this exist in T8 docs? From https://pr-3928.tinymce-docs.iad.staging.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins |
| https://pr-3928.tinymce-docs.iad.staging.tiny.cloud/docs/tinymce/latest/bundling-plugins/#using-premium-plugins - The flow/structure of this page confuses me tbh. Even just there being a "Contents" in the TOC - and not the TOC heading itself. Has something gone weird with the imports here? |
Nice catch, i have removed this. |
…ernal-plugin-npm file.
…tinymce-premium/file with examples ect.
| There are two options for replacing the icons in {productname}: `+icons+` and `+icons_url+`. {companyname} recommends using the `+icons+` option for icon packs bundled with the product or included in your cloud subscription. Custom or third-party icons should be included using the `+icons_url+` option to simplify updating and upgrading {productname}. | ||
| There are two options for replacing the icons in {productname}: `+icons+` and `+icons_url+`. | ||
| | ||
| * Use the `+icons+` option when icon packs are in the default location (for {cloudname} deployments, ZIP bundles, or when using NPM packages with bundling or file layering). |
There was a problem hiding this comment.
Can we link "default location" to something that actually explains where that is?
There was a problem hiding this comment.
Oh, hm, it is down further...
| Chasing up override order for icons. I.e. if someone specifies icons and icon_url for some reason, which overrides which. Figure it'd be worth mentioning. |
…s for better flow, and add references to NPM.
modules/ROOT/pages/editor-skin.adoc Outdated
| ==== | ||
| *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+`]. |
There was a problem hiding this comment.
| 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 the look of both {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+`]. |
don't mind me, just finding errors in my own copy
| 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+`]. | ||
| ==== | ||
| | ||
| The default skin does not require any configuration, though it must be imported when bundling for deployment: |
There was a problem hiding this comment.
| The default skin does not require any configuration, though it must be imported when bundling for deployment: | |
| The default skin does not require any configuration, though it must be imported when bundling for deployment. For example: |
| | ||
| {productname} icons come from icon packs. {productname} includes both community and premium icon packs, but also allows integrators to add custom icons or override {productname} icons with their own. | ||
| | ||
| The default icon pack is shipped with {productname} and does not require any configuration, though it must be imported when bundling for deployment: |
There was a problem hiding this comment.
| The default icon pack is shipped with {productname} and does not require any configuration, though it must be imported when bundling for deployment: | |
| The default icon pack is shipped with {productname} and does not require any configuration, though it must be imported when bundling for deployment. For example: |
…pdate references for NPM.
| :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 |
There was a problem hiding this comment.
| :keywords: skin, skins, icon, icons, material, bootstrap, customize, theme | |
| :keywords: skin, skins, icon, icons, material, bootstrap, customize |
| | ||
| | | ||
| [.lead] | ||
| xref:bundling-themes.adoc[Themes] |
There was a problem hiding this comment.
haven't checked what this is but flagging as theme related
| [.lead] | ||
| xref:bundling-themes.adoc[Themes] | ||
| | ||
| Bundle and customize {productname} themes for your editor interface. |
| | ||
| * All premium plugins. | ||
| * License key manager plugin. | ||
| * Premium skins, themes, icons, and language packs for premium plugins. |
There was a problem hiding this comment.
| * Premium skins, themes, icons, and language packs for premium plugins. | |
| * Premium skins, icons, and language packs for premium plugins. |
...is this a dupe of the content above? very familiar wording
| @@ -0,0 +1,63 @@ | |||
| === Premium plugins from NPM | |||
| | |||
| The `+tinymce-premium+` package is the recommended way to install and use premium plugins with {productname}. It includes all premium plugins, skins, themes, icons, and language packs. | |||
There was a problem hiding this comment.
| The `+tinymce-premium+` package is the recommended way to install and use premium plugins with {productname}. It includes all premium plugins, skins, themes, icons, and language packs. | |
| The `+tinymce-premium+` package is the recommended way to install and use premium plugins with {productname}. It includes all premium plugins, skins, icons, and language packs. |
| [[external_plugins]] | ||
| == `+external_plugins+` | ||
| | ||
| This option allows a URL based location of plugins to be provided that are outside of the normal {productname} plugins directory. |
There was a problem hiding this comment.
| This option allows plugins to be loaded from outside of the default {productname} plugins directory. This can be useful when loading custom plugins, or when loading plugins from the tinymce-premium NPM package or ZIP bundles without bundling. |
thoughts??
There was a problem hiding this comment.
ah, the "why" doubles up with the next paragraph...
There was a problem hiding this comment.
ignore this - see my DM instead
 This could maybe be a later thing, but it feels a little weird to be talking about NPM premium plugins then have an example for CDN plugins. |
| | ||
| A commercial license key manager (`+licensekeymanager+`) is required to be loaded by the editor when using a commercial license key. The commercial license key manager can be set up like any other plugin for self-hosted installations. However, it does not need to be specified in the `+plugins+` configuration option as the editor will attempt to automatically load the license key manager when required. | ||
| | ||
| The commercial license key manager is available: |
There was a problem hiding this comment.
Should we add explicit mention of tinymce-premium in here?
| ==== | ||
| | ||
| If hosting {productname} standalone, for example, in a `/public` folder, **ensure** the `+licensekeymanager+` folder is included in the `+plugins+` folder with all of the other plugins. The editor will not function without this. | ||
| == Considerations when hosting vs bundling |
There was a problem hiding this comment.
You can actually load LKM via external_plugins - should that be listed here too?
| } | ||
| ---- | ||
| | ||
| . Update the `+licenseKey+` option in the editor element and include your xref:license-key.adoc[License Key]. |
There was a problem hiding this comment.
Not 100% sure, but don't you only need to include your actual license key if you have a commercial license? If using open source, you just put gpl (per the example above)?
There was a problem hiding this comment.
Only looked at the Angular page as well, but this dot point was missing from that one too?
 Dupe content on https://pr-3928.tinymce-docs.iad.staging.tiny.cloud/docs/tinymce/latest/enhanced-skins-and-icon-packs/ |
| 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) |
There was a problem hiding this comment.
Should we note this requires skin to be in the default location, and link to the page with skin and skin_url?
There was a problem hiding this comment.
Same for the icon section
| [NOTE] | ||
| ==== | ||
| * **Icons**: The default icon pack is always required. Premium icon packs may not include all icons and are designed to fall back to the default icons when they suit the pack. Import both the default and premium icon packs, then configure which to use via the xref:editor-icons.adoc[`+icons+`] option in your editor configuration. |
There was a problem hiding this comment.
| * **Icons**: The default icon pack is always required. Premium icon packs may not include all icons and are designed to fall back to the default icons when they suit the pack. Import both the default and premium icon packs, then configure which to use via the xref:editor-icons.adoc[`+icons+`] option in your editor configuration. | |
| * **Icons**: The default icon pack is always required. Premium icon packs may not include all icons and are designed to fall back to the default icons when they suit the pack. Import both the default and premium icon packs, then use the xref:editor-icons.adoc[`+icons+`] option in your editor configuration to tell {productname} to also use the premium icon pack. |
pretty sure I wrote this originally but. fixes.
 we never explicitly state that the default skin is called oxide? from https://pr-3928.tinymce-docs.iad.staging.tiny.cloud/docs/tinymce/latest/browserify-cjs-npm/ |
| from https://pr-3928.tinymce-docs.iad.staging.tiny.cloud/docs/tinymce/latest/browserify-cjs-npm/ does this example actually render a toolbar at all? skin is set to false, and only content_style is being set explicitly, so there's nothing pulling in a UI skin.css I think??? don't know enough about how this works to be sure though |
…tool guide to clarify setup to support NPM package installations.
Ticket: DOC-3329
Staging:
Site: Staging branch
Primary page update for NPM:
Site: Quick Start: TinyMCE from NPM or Yarn
External plugins:
Site: external_plugins
License Key Manager: Update
Site: setting-up-the-commercial-license-key-manager
Self-Hosted Integration Guides:
Site: react-pm-bundle
Site: react-pm-host
Site: angular-pm
Site: vue-pm
Site: blazor-pm
Site: svelte-pm
Site: webcomponent-pm
Bundling TinyMCE
Site: Introduction to bundling TinyMCE
Site: Webpack (ES6) with NPM
Site: Webpack (CommonJS) with NPM
Site: Webpack (ES6) with self-hosted download
Site: Webpack (CommonJS) with self-hosted download
Site: Vite (ES6) with NPM
Site: Rollup (ES6) with NPM
Site: Rollup (ES6) with self-hosted download
Site: Browserify (CommonJS) with NPM
Site: Browserify (CommonJS) with self-hosted download
Bundling TinyMCE: Reference
Site: Bundling plugins TBC
Site: Bundling icons TBC
Site: Bundling themes TBC
General updates to support NPM for
langs | skins & iconsSite: ui-localization
Site: editor-skin
Site: editor-icons
Site: enhanced-skins-and-icon-packs
Pre-checks:
feature/<version>/,hotfix/<version>/,staging/<version>/, orrelease/<version>/.modules/ROOT/nav.adochas been updated(if applicable).release noteentry for anyNew product features.productminorversioninantora.ymland added new supported versions entry inmodules/ROOT/partials/misc/supported-versions.adoc.Review: