From 097dc6522a6082915df638c9b2f18556d9e393ae Mon Sep 17 00:00:00 2001 From: Karl Kemister-Sheppard Date: Thu, 12 Feb 2026 10:03:03 +1000 Subject: [PATCH] DOC-3367: Add new bBundling guide overview page. --- modules/ROOT/nav.adoc | 1 + modules/ROOT/pages/a11ychecker.adoc | 3 + modules/ROOT/pages/accordion.adoc | 2 + modules/ROOT/pages/advanced-templates.adoc | 3 + modules/ROOT/pages/advanced-typography.adoc | 3 + modules/ROOT/pages/advcode.adoc | 3 + modules/ROOT/pages/advlist.adoc | 3 + modules/ROOT/pages/advtable.adoc | 1 + modules/ROOT/pages/ai.adoc | 3 + modules/ROOT/pages/anchor.adoc | 2 + modules/ROOT/pages/autocorrect.adoc | 2 + modules/ROOT/pages/autolink.adoc | 3 + modules/ROOT/pages/autoresize.adoc | 3 + modules/ROOT/pages/autosave.adoc | 3 + modules/ROOT/pages/bundling-guide.adoc | 179 ++++++++++++++++++ modules/ROOT/pages/casechange.adoc | 2 + modules/ROOT/pages/charmap.adoc | 3 + modules/ROOT/pages/checklist.adoc | 3 + modules/ROOT/pages/code.adoc | 2 + modules/ROOT/pages/codesample.adoc | 3 + modules/ROOT/pages/directionality.adoc | 3 + modules/ROOT/pages/editimage.adoc | 3 + modules/ROOT/pages/emoticons.adoc | 2 + modules/ROOT/pages/exportpdf.adoc | 3 + modules/ROOT/pages/exportword.adoc | 3 + modules/ROOT/pages/footnotes.adoc | 3 + modules/ROOT/pages/formatpainter.adoc | 3 + modules/ROOT/pages/fullpagehtml.adoc | 3 + modules/ROOT/pages/fullscreen.adoc | 3 + modules/ROOT/pages/help.adoc | 2 + modules/ROOT/pages/image.adoc | 3 + modules/ROOT/pages/importcss.adoc | 3 + modules/ROOT/pages/importword.adoc | 3 + modules/ROOT/pages/inline-css.adoc | 3 + modules/ROOT/pages/insertdatetime.adoc | 3 + .../introduction-to-bundling-tinymce.adoc | 5 + modules/ROOT/pages/link.adoc | 2 + modules/ROOT/pages/linkchecker.adoc | 3 + modules/ROOT/pages/lists.adoc | 3 + modules/ROOT/pages/markdown.adoc | 3 + modules/ROOT/pages/math.adoc | 3 + modules/ROOT/pages/media.adoc | 3 + modules/ROOT/pages/mentions.adoc | 2 + modules/ROOT/pages/mergetags.adoc | 3 + modules/ROOT/pages/nonbreaking.adoc | 3 + modules/ROOT/pages/pagebreak.adoc | 3 + modules/ROOT/pages/pageembed.adoc | 2 + modules/ROOT/pages/permanentpen.adoc | 3 + modules/ROOT/pages/preview.adoc | 3 + modules/ROOT/pages/quickbars.adoc | 3 + modules/ROOT/pages/revisionhistory.adoc | 3 + modules/ROOT/pages/save.adoc | 3 + modules/ROOT/pages/searchreplace.adoc | 3 + modules/ROOT/pages/suggestededits.adoc | 2 + modules/ROOT/pages/table.adoc | 2 + modules/ROOT/pages/tableofcontents.adoc | 3 + modules/ROOT/pages/uploadcare-documents.adoc | 2 + modules/ROOT/pages/uploadcare-image.adoc | 2 + modules/ROOT/pages/uploadcare-video.adoc | 2 + modules/ROOT/pages/uploadcare.adoc | 2 + modules/ROOT/pages/visualblocks.adoc | 3 + modules/ROOT/pages/visualchars.adoc | 3 + modules/ROOT/pages/wordcount.adoc | 3 + .../partials/misc/bundling-guide-link.adoc | 4 + .../bundling-plugin-resources.adoc | 79 ++++++++ 65 files changed, 430 insertions(+) create mode 100644 modules/ROOT/pages/bundling-guide.adoc create mode 100644 modules/ROOT/partials/misc/bundling-guide-link.adoc diff --git a/modules/ROOT/nav.adoc b/modules/ROOT/nav.adoc index 5cb0884819..4704b55c14 100644 --- a/modules/ROOT/nav.adoc +++ b/modules/ROOT/nav.adoc @@ -149,6 +149,7 @@ *** xref:annotations.adoc[Using the Annotations API] ** Bundling {productname} *** xref:introduction-to-bundling-tinymce.adoc[Introduction] +*** xref:bundling-guide.adoc[Bundling overview] *** Webpack **** xref:webpack-es6-npm.adoc[ES6 and npm] **** xref:webpack-cjs-npm.adoc[CommonJS and npm] diff --git a/modules/ROOT/pages/a11ychecker.adoc b/modules/ROOT/pages/a11ychecker.adoc index 6abb3f1fda..0591c53037 100644 --- a/modules/ROOT/pages/a11ychecker.adoc +++ b/modules/ROOT/pages/a11ychecker.adoc @@ -33,6 +33,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + [[accessibility-rules]] == Accessibility Rules diff --git a/modules/ROOT/pages/accordion.adoc b/modules/ROOT/pages/accordion.adoc index 691d6cd97f..3301d9c66d 100644 --- a/modules/ROOT/pages/accordion.adoc +++ b/modules/ROOT/pages/accordion.adoc @@ -30,6 +30,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + == Options The following configuration options affect the behavior of the {pluginname} plugin. diff --git a/modules/ROOT/pages/advanced-templates.adoc b/modules/ROOT/pages/advanced-templates.adoc index 6c1423fa83..89f2b6eb0e 100644 --- a/modules/ROOT/pages/advanced-templates.adoc +++ b/modules/ROOT/pages/advanced-templates.adoc @@ -144,6 +144,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + NOTE: The undefined options in the above example must be defined. See the xref:options[Options] below for specific details on each function. diff --git a/modules/ROOT/pages/advanced-typography.adoc b/modules/ROOT/pages/advanced-typography.adoc index 2b1d2ac879..29638930d0 100644 --- a/modules/ROOT/pages/advanced-typography.adoc +++ b/modules/ROOT/pages/advanced-typography.adoc @@ -79,6 +79,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options The following configuration options affect the behavior of the {pluginname} plugin. diff --git a/modules/ROOT/pages/advcode.adoc b/modules/ROOT/pages/advcode.adoc index 504b7bba41..98a54d8663 100644 --- a/modules/ROOT/pages/advcode.adoc +++ b/modules/ROOT/pages/advcode.adoc @@ -38,6 +38,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Enable full-screen mode To enable the full-screen mode button in the {pluginname}, configure the plugin to run in inline mode and include the fullscreen plugin: diff --git a/modules/ROOT/pages/advlist.adoc b/modules/ROOT/pages/advlist.adoc index 7a8814e14e..e211985b06 100644 --- a/modules/ROOT/pages/advlist.adoc +++ b/modules/ROOT/pages/advlist.adoc @@ -22,6 +22,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Interactive demo liveDemo::advlist[] diff --git a/modules/ROOT/pages/advtable.adoc b/modules/ROOT/pages/advtable.adoc index 26f33138c5..264b4e8377 100644 --- a/modules/ROOT/pages/advtable.adoc +++ b/modules/ROOT/pages/advtable.adoc @@ -32,6 +32,7 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] == Sorting table rows and columns diff --git a/modules/ROOT/pages/ai.adoc b/modules/ROOT/pages/ai.adoc index bac1c04b95..7706e8cbfd 100644 --- a/modules/ROOT/pages/ai.adoc +++ b/modules/ROOT/pages/ai.adoc @@ -44,6 +44,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Using a proxy server with {pluginname} NOTE: As per OpenAI’s https://help.openai.com/en/articles/5112595-best-practices-for-api-key-safety[best practices for API key safety], deployment of an API key in a client-side environment is specifically not recommended. diff --git a/modules/ROOT/pages/anchor.adoc b/modules/ROOT/pages/anchor.adoc index 0f0f156539..2418e6b18b 100644 --- a/modules/ROOT/pages/anchor.adoc +++ b/modules/ROOT/pages/anchor.adoc @@ -24,6 +24,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + == Options include::partial$configuration/allow_html_in_named_anchor.adoc[leveloffset=+1] diff --git a/modules/ROOT/pages/autocorrect.adoc b/modules/ROOT/pages/autocorrect.adoc index f4cc23cc5d..bdc4747f70 100644 --- a/modules/ROOT/pages/autocorrect.adoc +++ b/modules/ROOT/pages/autocorrect.adoc @@ -27,6 +27,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + [[usage-notes]] == Usage notes diff --git a/modules/ROOT/pages/autolink.adoc b/modules/ROOT/pages/autolink.adoc index 613a812041..f2447c4f95 100644 --- a/modules/ROOT/pages/autolink.adoc +++ b/modules/ROOT/pages/autolink.adoc @@ -20,6 +20,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options include::partial$configuration/link_default_target.adoc[leveloffset=+1] diff --git a/modules/ROOT/pages/autoresize.adoc b/modules/ROOT/pages/autoresize.adoc index 02d4ba7a9e..7689e62164 100644 --- a/modules/ROOT/pages/autoresize.adoc +++ b/modules/ROOT/pages/autoresize.adoc @@ -22,6 +22,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == How it works The Autoresize plugin monitors content changes and automatically adjusts the editor height to accommodate the content. When enabled: diff --git a/modules/ROOT/pages/autosave.adoc b/modules/ROOT/pages/autosave.adoc index dfa71c6ecf..1ba1c385b0 100644 --- a/modules/ROOT/pages/autosave.adoc +++ b/modules/ROOT/pages/autosave.adoc @@ -26,6 +26,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options These settings affect the execution of the `+autosave+` plugin. The settings described here will affect the interval, duration and behavior of locally stored drafts of the current editor instance. diff --git a/modules/ROOT/pages/bundling-guide.adoc b/modules/ROOT/pages/bundling-guide.adoc new file mode 100644 index 0000000000..f2e8b1d661 --- /dev/null +++ b/modules/ROOT/pages/bundling-guide.adoc @@ -0,0 +1,179 @@ += Bundling {productname} - Overview +:navtitle: Bundling overview +:description_short: Overview of bundling TinyMCE with module bundlers +:description: Overview of bundling TinyMCE with module bundlers including required imports, plugins, and resources +:keywords: bundling, webpack, vite, rollup, modules, imports, es6, commonjs + +This guide provides an overview of bundling {productname} with module bundlers such as Webpack, Vite, Rollup, or Browserify. For bundler-specific setup instructions, see xref:introduction-to-bundling-tinymce.adoc[Introduction to bundling {productname}]. + +[NOTE] +==== +When using TinyMCE Cloud, dependencies and additional resources are automatically loaded. The information below applies to self-hosted installations using NPM or ZIP packages. +==== + +== Module syntax support + +{productname} supports both ES6 modules and CommonJS modules: + +* **ES6 modules**: Use `+import+` statements (shown in all documentation examples) +* **CommonJS modules**: Use `+require()+` statements + +Both syntaxes are supported, but this documentation uses ES6 module syntax in all examples. + +== Required imports + +include::partial$module-loading/bundling-required-components.adoc[] + +=== Example: Basic required imports + +[source,js] +---- +/* Import TinyMCE */ +import tinymce from 'tinymce'; + +/* Default icons are required */ +import 'tinymce/icons/default'; + +/* Required TinyMCE components */ +import 'tinymce/themes/silver'; +import 'tinymce/models/dom'; + +/* Import a skin (oxide is the default) */ +import 'tinymce/skins/ui/oxide/skin.js'; +import 'tinymce/skins/ui/oxide/content.js'; + +/* Content CSS for editor content styling */ +import 'tinymce/skins/content/default/content.js'; +---- + +For more information on: + +* Icons, see xref:bundling-icons.adoc[Bundling icons] +* Themes, see xref:bundling-themes.adoc[Bundling themes] +* Models, see xref:bundling-models.adoc[Bundling models] +* Skins, see xref:bundling-skins.adoc[Bundling skins] +* Content CSS, see xref:bundling-content-css.adoc[Bundling content CSS] + +== Importing plugins + +Most plugins can be imported directly using their plugin code. The import path depends on whether the plugin is a community or premium plugin: + +=== Community plugins + +[source,js] +---- +import 'tinymce/plugins/'; +---- + +=== Premium plugins + +[source,js] +---- +import 'tinymce-premium/plugins/'; +---- + +[IMPORTANT] +==== +When using premium plugins with a commercial license, you must include the `+licensekeymanager+` plugin: + +[source,js] +---- +import 'tinymce-premium/plugins/licensekeymanager'; +---- + +For more information, see xref:bundling-plugins.adoc#using-premium-plugins[Using premium plugins]. +==== + +For detailed information on bundling plugins, see xref:bundling-plugins.adoc[Bundling plugins]. + +== Plugin gotchas + +Some plugins require additional resource files (JS, CSS, or language files) to function properly. These must be explicitly imported when bundling: + +[IMPORTANT] +==== +Key points about plugin resources: + +* Core plugin resources typically use relative paths without file extensions +* Premium plugin resources (from `+tinymce-premium+`) MUST include the `.js` or `.css` file extension in the import path +* Plugins lazy-load additional resources at runtime, so these files must be included in the bundle or accessible as static assets +==== + +=== Plugins requiring additional resources + +* **Emoticons**: Requires an emoji database file (`+js/emojis+`) +* **Help**: Requires a keyboard navigation language file (`+js/i18n/keynav/+`) +* **Page Embed**: Requires a CSS file (`+css/empa30.css+`) +* **Autocorrect**: Requires a word list file (`+js/en.js+`) +* **Uploadcare**: Requires a webcomponent file (`+js/uc-video.js+`) + +For specific import examples, see xref:bundling-plugins.adoc#plugin-resources[Additional plugin resources]. + +=== Plugin dependencies + +Some plugins depend on other plugins. For example: + +* The `+advtable+` plugin requires the `+table+` plugin + +Always import dependent plugins before the plugin that requires them. + +== CSS files + +Plugin CSS files are typically included automatically when importing plugins. However, some plugins may require explicit CSS imports for proper styling. + +When using skins, you must import both: + +* The skin CSS file (`+skin.css+` or `+skin.js+`) +* The content UI CSS file (`+content.css+` or `+content.js+`) + +For more information, see xref:bundling-skins.adoc[Bundling skins]. + +== Language files + +Language files are optional and used for localizing the {productname} UI and plugin interfaces. + +=== Core UI language files + +[source,js] +---- +import 'tinymce/langs/.js'; +---- + +For premium packages: + +[source,js] +---- +import 'tinymce-premium/langs/.js'; +---- + +=== Plugin language files + +Plugin language files are separate from the main UI language files: + +[source,js] +---- +// Community plugin language file +import 'tinymce/plugins//langs/.js'; + +// Premium plugin language file (note: .js extension required) +import 'tinymce-premium/plugins//langs/.js'; +---- + +[NOTE] +==== +* English is the default language, so `+en.js+` language files don't exist +* For premium plugins, the language file path must include the `.js` extension +==== + +For more information, see xref:bundling-localization.adoc[UI localizations]. + +== Next steps + +* xref:introduction-to-bundling-tinymce.adoc[Introduction to bundling {productname}] - Bundler-specific guides +* xref:bundling-themes.adoc[Bundling themes] - Theme configuration and customization +* xref:bundling-models.adoc[Bundling models] - Model configuration +* xref:bundling-plugins.adoc[Bundling plugins] - Detailed plugin bundling information +* xref:bundling-skins.adoc[Bundling skins] - Skin configuration and customization +* xref:bundling-icons.adoc[Bundling icons] - Icon pack configuration +* xref:bundling-content-css.adoc[Content CSS] - Content styling configuration +* xref:bundling-localization.adoc[UI localizations] - Language file configuration diff --git a/modules/ROOT/pages/casechange.adoc b/modules/ROOT/pages/casechange.adoc index 726b910aaa..b834313dc3 100644 --- a/modules/ROOT/pages/casechange.adoc +++ b/modules/ROOT/pages/casechange.adoc @@ -16,6 +16,8 @@ liveDemo::casechange[] // include::partial$misc/purchase-premium-plugins.adoc[] +include::partial$misc/bundling-guide-link.adoc[] + == Changing the case of selected text Perform the following steps to change the case of selected text in a document to lowercase, UPPERCASE, or Title Case: diff --git a/modules/ROOT/pages/charmap.adoc b/modules/ROOT/pages/charmap.adoc index d17ceae3ab..bf001fec8b 100644 --- a/modules/ROOT/pages/charmap.adoc +++ b/modules/ROOT/pages/charmap.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options The default map of unicode characters can be overridden or extended through the options below. diff --git a/modules/ROOT/pages/checklist.adoc b/modules/ROOT/pages/checklist.adoc index c12827382c..b412228c39 100644 --- a/modules/ROOT/pages/checklist.adoc +++ b/modules/ROOT/pages/checklist.adoc @@ -48,6 +48,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + NOTE: The *Checklist* plugin has to be used together with the xref:lists.adoc[Lists] plugin to work. == CSS diff --git a/modules/ROOT/pages/code.adoc b/modules/ROOT/pages/code.adoc index 510e94f5a7..fcb1f9b2c3 100644 --- a/modules/ROOT/pages/code.adoc +++ b/modules/ROOT/pages/code.adoc @@ -18,6 +18,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + include::partial$misc/code-dialog-and-selection-state.adoc[] include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] diff --git a/modules/ROOT/pages/codesample.adoc b/modules/ROOT/pages/codesample.adoc index bb29cda298..1fed4a5e27 100644 --- a/modules/ROOT/pages/codesample.adoc +++ b/modules/ROOT/pages/codesample.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + By default, `+codesample+` uses `+http://prismjs.com/+` to embed the code samples within the editor and works out of the box. That is, when a user copies valid code syntax into the editable area the code will be automatically formatted according to Prism default CSS rules. NOTE: Prism.js and prism.css need to be added to a page for syntax highlighting to work. See the instructions below to learn how to do this. diff --git a/modules/ROOT/pages/directionality.adoc b/modules/ROOT/pages/directionality.adoc index 5400e1c9e0..53f6b66c9c 100644 --- a/modules/ROOT/pages/directionality.adoc +++ b/modules/ROOT/pages/directionality.adoc @@ -19,6 +19,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] == Commands diff --git a/modules/ROOT/pages/editimage.adoc b/modules/ROOT/pages/editimage.adoc index 4d0d5c6157..105437e2b0 100644 --- a/modules/ROOT/pages/editimage.adoc +++ b/modules/ROOT/pages/editimage.adoc @@ -40,6 +40,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Self-hosted Installation To enable the {productname} Image Editing plugin: diff --git a/modules/ROOT/pages/emoticons.adoc b/modules/ROOT/pages/emoticons.adoc index 6a5efbc189..272b0857d9 100644 --- a/modules/ROOT/pages/emoticons.adoc +++ b/modules/ROOT/pages/emoticons.adoc @@ -22,6 +22,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + == Browser emoji support By default, the emoticon plugin inserts Unicode character codes, such as `+\ud83d\ude03+` for the smiley emoji. How emoji are rendered is dependent on the web browser and operating system of the user. As a result of this, some emoji may be rendered in black and white, or may not render. To ensure emoji render consistently across browsers and operating systems, {companyname} recommends adding an emoji-compatible web font to the default font-family using xref:add-css-options.adoc#content_css[`+content_css+`]. diff --git a/modules/ROOT/pages/exportpdf.adoc b/modules/ROOT/pages/exportpdf.adoc index 7bdb1c607e..05dfce125f 100644 --- a/modules/ROOT/pages/exportpdf.adoc +++ b/modules/ROOT/pages/exportpdf.adoc @@ -39,6 +39,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + For more infomation on the exportpdf_token_provider option, see xref:exportpdf.adoc#exportpdf-token-provider[exportpdf_token_provider]. include::partial$misc/admon-jwt-authentication-requirements.adoc[] diff --git a/modules/ROOT/pages/exportword.adoc b/modules/ROOT/pages/exportword.adoc index 2d02f37f99..307f1606a9 100644 --- a/modules/ROOT/pages/exportword.adoc +++ b/modules/ROOT/pages/exportword.adoc @@ -47,6 +47,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + For more infomation on the exportword_token_provider option, see xref:exportword.adoc#exportword-token-provider[exportword_token_provider] include::partial$misc/admon-jwt-authentication-requirements.adoc[] diff --git a/modules/ROOT/pages/footnotes.adoc b/modules/ROOT/pages/footnotes.adoc index 002c0af845..ed891708a7 100644 --- a/modules/ROOT/pages/footnotes.adoc +++ b/modules/ROOT/pages/footnotes.adoc @@ -31,6 +31,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + The footnotes section, which is placed at the bottom of the {productname} editor, is created when the first footnote is added. Footnotes can be inserted with diff --git a/modules/ROOT/pages/formatpainter.adoc b/modules/ROOT/pages/formatpainter.adoc index 435e0ddf0c..f24b3c9a14 100644 --- a/modules/ROOT/pages/formatpainter.adoc +++ b/modules/ROOT/pages/formatpainter.adoc @@ -34,6 +34,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Using Format Painter The format painter is accessed using either keyboard shortcuts or a toolbar button. diff --git a/modules/ROOT/pages/fullpagehtml.adoc b/modules/ROOT/pages/fullpagehtml.adoc index e09e314def..2d96f53856 100644 --- a/modules/ROOT/pages/fullpagehtml.adoc +++ b/modules/ROOT/pages/fullpagehtml.adoc @@ -35,6 +35,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + [WARNING] ==== **Certain elements may be removed by XSS sanitization** diff --git a/modules/ROOT/pages/fullscreen.adoc b/modules/ROOT/pages/fullscreen.adoc index d5345a46c6..4f59665690 100644 --- a/modules/ROOT/pages/fullscreen.adoc +++ b/modules/ROOT/pages/fullscreen.adoc @@ -23,6 +23,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + [NOTE] This feature is supported only when {productname} is operating in classic mode. It is **not supported** in inline mode. For details on the differences between editing modes, refer to xref:use-tinymce-classic.adoc[Classic editing mode]. diff --git a/modules/ROOT/pages/help.adoc b/modules/ROOT/pages/help.adoc index ab1a71e149..fd92e35cd5 100644 --- a/modules/ROOT/pages/help.adoc +++ b/modules/ROOT/pages/help.adoc @@ -39,6 +39,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + == Options include::partial$configuration/help_accessibility.adoc[leveloffset=+1] diff --git a/modules/ROOT/pages/image.adoc b/modules/ROOT/pages/image.adoc index 7dc3b051cc..d8a41035a9 100644 --- a/modules/ROOT/pages/image.adoc +++ b/modules/ROOT/pages/image.adoc @@ -22,6 +22,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + NOTE: This is not drag-drop functionality and the user is required to enter the path to the image. Optionally the user can also enter the image description, dimensions, and whether image proportions should be constrained (selected via a checkbox). Some of these settings can be preset using the plugin's configuration options. :includedSection: imagePlugin diff --git a/modules/ROOT/pages/importcss.adoc b/modules/ROOT/pages/importcss.adoc index 0fbdd4c20b..83eb592519 100644 --- a/modules/ROOT/pages/importcss.adoc +++ b/modules/ROOT/pages/importcss.adoc @@ -19,6 +19,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options These settings affect the execution of the `+importcss+` plugin, specifically the way that these operations are handled. diff --git a/modules/ROOT/pages/importword.adoc b/modules/ROOT/pages/importword.adoc index 2134fa1653..b991d58a44 100644 --- a/modules/ROOT/pages/importword.adoc +++ b/modules/ROOT/pages/importword.adoc @@ -40,6 +40,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + For more infomation on the importword_token_provider option, see xref:importword.adoc#importword-token-provider[importword_token_provider]. include::partial$misc/admon-jwt-authentication-requirements.adoc[] diff --git a/modules/ROOT/pages/inline-css.adoc b/modules/ROOT/pages/inline-css.adoc index 7d64a07960..74ac257227 100644 --- a/modules/ROOT/pages/inline-css.adoc +++ b/modules/ROOT/pages/inline-css.adoc @@ -31,6 +31,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Usage notes The {pluginname} plugin does not support diff --git a/modules/ROOT/pages/insertdatetime.adoc b/modules/ROOT/pages/insertdatetime.adoc index 71f99095dc..e567b2c9ab 100644 --- a/modules/ROOT/pages/insertdatetime.adoc +++ b/modules/ROOT/pages/insertdatetime.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options These settings affect the execution of the `+insertdatetime+` plugin. Formats for both dates and times can be set in these configuration options. diff --git a/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc b/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc index 26f01c794a..a849519d03 100644 --- a/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc +++ b/modules/ROOT/pages/introduction-to-bundling-tinymce.adoc @@ -4,6 +4,11 @@ :description: Introduction to bundling TinyMCE with Webpack, Rollup.js, or Browserify. :keywords: webpack, browserify, es6, rollup, commonjs, modules, tinymce, es2015 +[NOTE] +==== +For a general overview of bundling {productname}, including required imports, plugin gotchas, and common patterns, see xref:bundling-guide.adoc[Bundling {productname} - Overview]. +==== + The following guides and reference pages assist with bundling {productname} into your project using a module bundler, such as Webpack, Rollup.js, and Browserify. == Webpack diff --git a/modules/ROOT/pages/link.adoc b/modules/ROOT/pages/link.adoc index ac2f5c5ed7..b76f51e506 100644 --- a/modules/ROOT/pages/link.adoc +++ b/modules/ROOT/pages/link.adoc @@ -22,6 +22,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + == Options These settings affect the execution of the `+link+` plugin. Predefined links, targets, and more can be specified here. diff --git a/modules/ROOT/pages/linkchecker.adoc b/modules/ROOT/pages/linkchecker.adoc index bf54b590d2..01451b3da2 100644 --- a/modules/ROOT/pages/linkchecker.adoc +++ b/modules/ROOT/pages/linkchecker.adoc @@ -32,6 +32,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Self-hosted Instructions Customers using a Self-hosted environment will need to provide a URL to their deployment of the link checking service via the `+linkchecker_service_url+` parameter diff --git a/modules/ROOT/pages/lists.adoc b/modules/ROOT/pages/lists.adoc index 70234ab574..77f82bf7dc 100644 --- a/modules/ROOT/pages/lists.adoc +++ b/modules/ROOT/pages/lists.adoc @@ -20,6 +20,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Example adding the `listprops` menu item to the Tools menu The `listprops` xref:#menu-items[menu item] opens the List Properties dialog. diff --git a/modules/ROOT/pages/markdown.adoc b/modules/ROOT/pages/markdown.adoc index 9ec4b7bf73..89888d2b72 100644 --- a/modules/ROOT/pages/markdown.adoc +++ b/modules/ROOT/pages/markdown.adoc @@ -50,6 +50,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Interactive examples liveDemo::{plugincode}[] diff --git a/modules/ROOT/pages/math.adoc b/modules/ROOT/pages/math.adoc index ff0cdbb3b9..08ff8970ef 100644 --- a/modules/ROOT/pages/math.adoc +++ b/modules/ROOT/pages/math.adoc @@ -32,6 +32,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == How to Use To work with math elements, follow these steps: diff --git a/modules/ROOT/pages/media.adoc b/modules/ROOT/pages/media.adoc index a4bdb99782..830f81f9e8 100644 --- a/modules/ROOT/pages/media.adoc +++ b/modules/ROOT/pages/media.adoc @@ -20,6 +20,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options These options affect the execution of the `+media+` plugin, making it possible to disable parts of the media dialog made available to an end-user inserting or editing media items. diff --git a/modules/ROOT/pages/mentions.adoc b/modules/ROOT/pages/mentions.adoc index 4e2696a079..f43709aa2a 100644 --- a/modules/ROOT/pages/mentions.adoc +++ b/modules/ROOT/pages/mentions.adoc @@ -16,6 +16,8 @@ liveDemo::mentions[height="400"] // include::partial$misc/purchase-premium-plugins.adoc[] +include::partial$misc/bundling-guide-link.adoc[] + == Options These configuration options affect the execution of the `+mentions+` plugin. The main option that needs to be implemented is the `+mentions_fetch+` callback. diff --git a/modules/ROOT/pages/mergetags.adoc b/modules/ROOT/pages/mergetags.adoc index cbd638ffa1..139114dba7 100644 --- a/modules/ROOT/pages/mergetags.adoc +++ b/modules/ROOT/pages/mergetags.adoc @@ -47,6 +47,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + The {pluginname} plugin provides an xref:autocompleter.adoc[autocompleter] for adding a merge tag without using the toolbar button or menu item. The autocompleter is triggered by typing a specified prefix, controlled by the xref:#mergetags_prefix[`+mergetags_prefix+`] option. diff --git a/modules/ROOT/pages/nonbreaking.adoc b/modules/ROOT/pages/nonbreaking.adoc index 947096ce24..8b4b372fd3 100644 --- a/modules/ROOT/pages/nonbreaking.adoc +++ b/modules/ROOT/pages/nonbreaking.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options include::partial$configuration/nonbreaking_force_tab.adoc[leveloffset=+1] diff --git a/modules/ROOT/pages/pagebreak.adoc b/modules/ROOT/pages/pagebreak.adoc index d5322a313a..faea89cdb3 100644 --- a/modules/ROOT/pages/pagebreak.adoc +++ b/modules/ROOT/pages/pagebreak.adoc @@ -20,6 +20,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options These settings affect the execution of the `+pagebreak+` plugin. They enable you to specify how the page break should be generated in the HTML source code and determine whether the page break element(s) should be wrapped in `+

+` tags. diff --git a/modules/ROOT/pages/pageembed.adoc b/modules/ROOT/pages/pageembed.adoc index cc88b7a8c9..61eb3fd013 100644 --- a/modules/ROOT/pages/pageembed.adoc +++ b/modules/ROOT/pages/pageembed.adoc @@ -34,6 +34,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + *Result*: The image:icons/embed-page.svg[Page Embed](*Page Embed*) button appears in the toolbar menu. == Using Page Embed diff --git a/modules/ROOT/pages/permanentpen.adoc b/modules/ROOT/pages/permanentpen.adoc index a9e6bf4056..4aae622d50 100644 --- a/modules/ROOT/pages/permanentpen.adoc +++ b/modules/ROOT/pages/permanentpen.adoc @@ -108,6 +108,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options include::partial$configuration/permanentpen_properties.adoc[leveloffset=+1] diff --git a/modules/ROOT/pages/preview.adoc b/modules/ROOT/pages/preview.adoc index ec9ee88037..388dfc84c4 100644 --- a/modules/ROOT/pages/preview.adoc +++ b/modules/ROOT/pages/preview.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] include::partial$misc/plugin-menu-item-id-boilerplate.adoc[] diff --git a/modules/ROOT/pages/quickbars.adoc b/modules/ROOT/pages/quickbars.adoc index 0772c929a8..9f94a9498e 100644 --- a/modules/ROOT/pages/quickbars.adoc +++ b/modules/ROOT/pages/quickbars.adoc @@ -31,6 +31,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + === Disabling specific quick toolbars The following examples show how to disable specific quick toolbars for editors where they are not required. diff --git a/modules/ROOT/pages/revisionhistory.adoc b/modules/ROOT/pages/revisionhistory.adoc index 0df0343897..a8a2dbac99 100644 --- a/modules/ROOT/pages/revisionhistory.adoc +++ b/modules/ROOT/pages/revisionhistory.adoc @@ -59,6 +59,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Understanding revision types The {pluginname} plugin offers three revision types: diff --git a/modules/ROOT/pages/save.adoc b/modules/ROOT/pages/save.adoc index d0011fcdb5..96cbd0aa6e 100644 --- a/modules/ROOT/pages/save.adoc +++ b/modules/ROOT/pages/save.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Save error messages The `+"Error: Form submit field collision."+` error message will appear if you call the submit button of your form "submit", which causes a collision with the JS form `+submit+` function and makes it impossible to submit the form using code. This can easily be avoided by naming the submit button `+"submitbtn"+` or similar. diff --git a/modules/ROOT/pages/searchreplace.adoc b/modules/ROOT/pages/searchreplace.adoc index 7893c05474..a6f4aa316a 100644 --- a/modules/ROOT/pages/searchreplace.adoc +++ b/modules/ROOT/pages/searchreplace.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] include::partial$misc/plugin-menu-item-id-boilerplate.adoc[] diff --git a/modules/ROOT/pages/suggestededits.adoc b/modules/ROOT/pages/suggestededits.adoc index 9d983e4a26..b7a9d9bb6e 100644 --- a/modules/ROOT/pages/suggestededits.adoc +++ b/modules/ROOT/pages/suggestededits.adoc @@ -17,6 +17,8 @@ liveDemo::{plugincode}[] include::partial$misc/admon-iframe-only.adoc[] +include::partial$misc/bundling-guide-link.adoc[] + == How it works The {pluginname} plugin keeps track of every edit made to the document by the current user and stores this metadata in an internal model of the document. These suggestions can then be reviewed in the Review Edits view, where each edit is highlighted in the document, and where users can accept, reject, or provide feedback. The Review Edits view is accessible via either the `suggestededits` toolbar button or menu button within the `View` menu. diff --git a/modules/ROOT/pages/table.adoc b/modules/ROOT/pages/table.adoc index 1a9e483902..3ceee1d927 100644 --- a/modules/ROOT/pages/table.adoc +++ b/modules/ROOT/pages/table.adoc @@ -18,6 +18,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + == Options NOTE: For additional options that are provided by the core table functionality, see xref:table-options.adoc[Table Options]. diff --git a/modules/ROOT/pages/tableofcontents.adoc b/modules/ROOT/pages/tableofcontents.adoc index 11e2747e87..f601d661f8 100644 --- a/modules/ROOT/pages/tableofcontents.adoc +++ b/modules/ROOT/pages/tableofcontents.adoc @@ -29,6 +29,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + The _Table of Contents_ will have a simple HTML structure - a wrapper `+div+` element, a header with _editable_ title and unordered nested list with navigation links. Nesting depth is customizable. Internally plugin does not apply inline styles. Basic formatting can be added via xref:editor-content-css.adoc[Boilerplate Content CSS], that can be customized to your needs. diff --git a/modules/ROOT/pages/uploadcare-documents.adoc b/modules/ROOT/pages/uploadcare-documents.adoc index bf6f36e605..f85d9121c3 100644 --- a/modules/ROOT/pages/uploadcare-documents.adoc +++ b/modules/ROOT/pages/uploadcare-documents.adoc @@ -66,6 +66,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + [NOTE] ==== The {pluginname} plugin automatically configures the xref:link.adoc#files_upload_handler[`+files_upload_handler+`] and `+documents_file_types+` options when both the Link plugin and the {pluginname} plugin are enabled. This enables file uploads in the Link dialog without requiring manual configuration. However, you can customize the list of supported file types by explicitly setting the xref:uploadcare.adoc#documents-file-types[`+documents_file_types+`] option as shown in the example above. diff --git a/modules/ROOT/pages/uploadcare-image.adoc b/modules/ROOT/pages/uploadcare-image.adoc index 3e3c022665..300e424134 100644 --- a/modules/ROOT/pages/uploadcare-image.adoc +++ b/modules/ROOT/pages/uploadcare-image.adoc @@ -47,6 +47,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + [NOTE] ==== The {pluginname} plugin overrides the xref:quickbars.adoc[Quickbar] quickimage toolbar item. To ensure a better user experience and to avoid having two image buttons configure `quickbars_insert_toolbar` to omit the `quickimage` toolbar item. diff --git a/modules/ROOT/pages/uploadcare-video.adoc b/modules/ROOT/pages/uploadcare-video.adoc index 321fb785b6..edef306129 100644 --- a/modules/ROOT/pages/uploadcare-video.adoc +++ b/modules/ROOT/pages/uploadcare-video.adoc @@ -44,6 +44,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + [NOTE] ==== The {pluginname} plugin uses the same plugin code `+uploadcare+` as the Media Optimizer plugin. Video functionality is automatically enabled when video files are uploaded. diff --git a/modules/ROOT/pages/uploadcare.adoc b/modules/ROOT/pages/uploadcare.adoc index f140fecfae..a98fe2b940 100644 --- a/modules/ROOT/pages/uploadcare.adoc +++ b/modules/ROOT/pages/uploadcare.adoc @@ -50,6 +50,8 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + == Features For a complete guide to the features provided by the {pluginname} plugin, see the following pages: diff --git a/modules/ROOT/pages/visualblocks.adoc b/modules/ROOT/pages/visualblocks.adoc index a8af768305..704c4c5366 100644 --- a/modules/ROOT/pages/visualblocks.adoc +++ b/modules/ROOT/pages/visualblocks.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options This setting affects the execution of the `+visualblocks+` plugin. You may specify whether blocks are visible by default here. diff --git a/modules/ROOT/pages/visualchars.adoc b/modules/ROOT/pages/visualchars.adoc index 507f020bb8..20d1c6238a 100644 --- a/modules/ROOT/pages/visualchars.adoc +++ b/modules/ROOT/pages/visualchars.adoc @@ -18,6 +18,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + == Options This setting affects the execution of the `+visualchars+` plugin. Characters can be configured to be visible by default using this option. diff --git a/modules/ROOT/pages/wordcount.adoc b/modules/ROOT/pages/wordcount.adoc index d5d6363ede..9de4371eb0 100644 --- a/modules/ROOT/pages/wordcount.adoc +++ b/modules/ROOT/pages/wordcount.adoc @@ -151,6 +151,9 @@ tinymce.init({ }); ---- +include::partial$misc/bundling-guide-link.adoc[] + + include::partial$misc/plugin-toolbar-button-id-boilerplate.adoc[] include::partial$misc/plugin-menu-item-id-boilerplate.adoc[] diff --git a/modules/ROOT/partials/misc/bundling-guide-link.adoc b/modules/ROOT/partials/misc/bundling-guide-link.adoc new file mode 100644 index 0000000000..3899ec8e83 --- /dev/null +++ b/modules/ROOT/partials/misc/bundling-guide-link.adoc @@ -0,0 +1,4 @@ +[NOTE] +==== +For information on bundling this plugin with module bundlers, see xref:bundling-guide.adoc[Bundling {productname} - Overview]. +==== diff --git a/modules/ROOT/partials/module-loading/bundling-plugin-resources.adoc b/modules/ROOT/partials/module-loading/bundling-plugin-resources.adoc index 233779a452..d7bfad52c3 100644 --- a/modules/ROOT/partials/module-loading/bundling-plugin-resources.adoc +++ b/modules/ROOT/partials/module-loading/bundling-plugin-resources.adoc @@ -138,3 +138,82 @@ require('../tinymce/plugins/emoticons/js/emojis'); ---- |=== +[[autocorrect-plugin-resources]] +==== Spelling Autocorrect plugin (`+autocorrect+`) + +The xref:autocorrect.adoc[Spelling Autocorrect plugin] requires a word list file. English is the only supported language. + +[cols='1,1,4'] +|=== +|Module Syntax |Source |Example + +.2+|ES6+ +|npm +a| +[source, js] +---- +import 'tinymce-premium/plugins/autocorrect/js/en.js'; +---- + +|`.zip` +a| +[source, js] +---- +import '../plugins/autocorrect/js/en.js'; +---- + +.2+|Common JS +|npm +a| +[source, js] +---- +require('tinymce-premium/plugins/autocorrect/js/en.js'); +---- + +|`.zip` +a| +[source, js] +---- +require('../plugins/autocorrect/js/en.js'); +---- +|=== + +[[uploadcare-plugin-resources]] +==== Media Optimizer plugin (`+uploadcare+`) + +The xref:uploadcare.adoc[Media Optimizer plugin] requires a webcomponent file for video functionality. The `+uc-video.js+` file is needed when using the video features of the plugin. + +[cols='1,1,4'] +|=== +|Module Syntax |Source |Example + +.2+|ES6+ +|npm +a| +[source, js] +---- +import 'tinymce-premium/plugins/uploadcare/js/uc-video.js'; +---- + +|`.zip` +a| +[source, js] +---- +import '../plugins/uploadcare/js/uc-video.js'; +---- + +.2+|Common JS +|npm +a| +[source, js] +---- +require('tinymce-premium/plugins/uploadcare/js/uc-video.js'); +---- + +|`.zip` +a| +[source, js] +---- +require('../plugins/uploadcare/js/uc-video.js'); +---- +|=== \ No newline at end of file