Bundling TinyMCE plugins using module loading

Overview

TinyMCE plugins can be bundled using a module bundler such as Webpack, Rollup, or Vite. This guide covers how to include both community and premium plugins in your application bundle.

TinyMCE includes both community and premium plugins:

  • Community plugins: Available with all TinyMCE installations

  • Premium plugins: Available with paid TinyMCE subscriptions via the tinymce-premium package

File structure

This section shows the files required for each TinyMCE plugin. The file paths shown are relative to the root TinyMCE package directory, where tinymce.min.js is stored. For example:

./
├── icons/
├── langs/
├── license.txt
├── models/
├── plugins/
├── readme.txt
├── skins/
├── themes/
├── tinymce.d.ts
├── tinymce.js
├── tinymce.min.js
└── version.txt

Required base folder

The below base folder is required for each plugin when bundling TinyMCE.

./plugins/<plugincode>

Bundling syntax examples

The following examples show the syntax for including plugins in a bundle. The examples use a placeholder <plugincode> to represent any plugin name:

Module Syntax Source Example

ES6+

npm (community plugins)

 
import 'tinymce/plugins/<plugincode>';

npm (premium plugins)

 
import 'tinymce-premium/plugins/<plugincode>';

.zip (community plugins)

 
import '<path_to_tinymce_zip>/plugins/<plugincode>';

.zip (premium plugins)

 
import '<path_to_tinymce_premium_zip>/plugins/<plugincode>';

Common JS

npm (community plugins)

 
require('tinymce/plugins/<plugincode>');

npm (premium plugins)

 
require('tinymce-premium/plugins/<plugincode>');

.zip (community plugins)

 
require('<path_to_tinymce_zip>/plugins/<plugincode>');

.zip (premium plugins)

 
require('<path_to_tinymce_premium_zip>/plugins/<plugincode>');

Using premium plugins

After installing the tinymce-premium package, you need to configure the plugins in your editor. There are two main approaches:

License Key Manager Requirement:

When using premium plugins with a commercial license, you must include the licensekeymanager plugin. The editor will not function properly without it. For more information, see: License Key.

When bundling:

import 'tinymce-premium/plugins/licensekeymanager';

When using external_plugins:

external_plugins: {
  'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/plugin.min.js'
}

For most modern applications, bundling premium plugins is recommended. This includes the plugin code directly in your application bundle.

  1. Import the premium plugins you need:

    import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

  2. Add the plugins to your editor configuration:

    tinymce.init({
  selector: 'textarea',
  license_key: 'T8LK:...', // Your commercial license key
  plugins: 'advcode tinycomments',
  // ... other configuration
});

For complete bundling examples, see the Premium plugins and Community plugins sections below.

Using external_plugins (Non-bundling)

When bundling is not available or you want to lazy-load plugins, use the external_plugins option:

tinymce.init({
  selector: 'textarea',
  license_key: 'T8LK:...', // Your commercial license key
  external_plugins: {
    'advcode': '/<path_to_premium_plugins>/advcode/plugin.min.js',
    'tinycomments': '/<path_to_premium_plugins>/tinycomments/plugin.min.js',
    // Always include the licensekeymanager plugin when using premium plugins with a commercial license.
    'licensekeymanager': '/<path_to_premium_plugins>/licensekeymanager/plugin.min.js'
  },
  plugins: 'advcode tinycomments',
  // ... other configuration
});

The external_plugins option supports three URL formats:

  • Absolute URLs (e.g., https://cdn.example.com/...)

  • Relative to web-server root (e.g., /node_modules/...)

  • Relative to TinyMCE base_url (e.g., ../../node_modules/...)

For more information, see: external_plugins configuration option.

Premium plugins

When bundling, replace the plugincode with the specific plugins in your TinyMCE configuration.

The tinymce-premium package is the recommended way to install and use premium plugins with TinyMCE. It includes all premium plugins, skins, icons, and language packs.

To bundle premium plugins from the NPM package, import the individual plugins you need.

Module Syntax Source Example

ES6+

NPM

 
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
/* Always include the licensekeymanager plugin when using premium plugins with a commercial license. */
import 'tinymce-premium/plugins/licensekeymanager';

.zip

 
import '<path_to_tinymce_premium_zip>/plugins/advcode';

Common JS

NPM

 
require('tinymce-premium/plugins/advcode');
require('tinymce-premium/plugins/tinycomments');
/* Always include the licensekeymanager plugin when using premium plugins with a commercial license. */
require('tinymce-premium/plugins/licensekeymanager');

.zip

 
require('<path_to_tinymce_premium_zip>/plugins/advcode');

If premium skins and icons are required, you can import them from the tinymce-premium package:

// Premium skins (oxide is the default skin)
import 'tinymce-premium/skins/ui/oxide/skin.css';

// Premium icons
import 'tinymce-premium/icons/premium';

  • 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 icons option in your editor configuration to tell TinyMCE to also use the premium icon pack.

  • Skins: Import either a community or premium skin (not both). Configure the skin using the skin option in your editor configuration.

Plugin language files (such as ./plugins/<plugincode>/langs/sv_SE.js) are required where the editor user interface is localized using the language option.

The below plugins require these plugin-language-files

  • AI Assistant (ai)

  • Accessibility Checker (a11ychecker)

  • Enhanced Code (advcode)

  • Enhanced Tables (advtable)

  • Templates (advtemplate)

  • Spelling Autocorrect (autocorrect)

  • Image Editing (editimage)

  • Export to PDF (exportpdf)

  • Export to Word (exportword)

  • Footnotes (footnotes)

  • Import from Word (importword)

  • Merge Tags (mergetags)

  • Page Embedding (pageembed)

  • PowerPaste (powerpaste)

  • Revision History (revisionhistory)

  • Table of Contents (tableofcontents)

  • Comments (tinycomments)

  • Spell Checker (tinymcespellchecker)

  • Typography (typography)

Community plugins

When bundling, replace the plugincode with the specific plugins in your TinyMCE configuration.

The below plugin also requires additional files to be included along side the base folder.

Emoticons (emoticons)

Requires other js files
./plugins/emoticons/js/emojiimages.js
./plugins/emoticons/js/emojis.js
Only one of the above .js files are required, depending on which one is chosen through the emoticons_database setting.

Plugin language files

Replace <plugincode> placeholder with the specific plugincode when adding the plugin language files to your config. 
./plugins/<plugincode>/langs/ar.js
./plugins/<plugincode>/langs/bg_BG.js
./plugins/<plugincode>/langs/ca.js
./plugins/<plugincode>/langs/cs.js
./plugins/<plugincode>/langs/da.js
./plugins/<plugincode>/langs/de.js
./plugins/<plugincode>/langs/el.js
./plugins/<plugincode>/langs/es.js
./plugins/<plugincode>/langs/eu.js
./plugins/<plugincode>/langs/fa.js
./plugins/<plugincode>/langs/fi.js
./plugins/<plugincode>/langs/fr_FR.js
./plugins/<plugincode>/langs/he_IL.js
./plugins/<plugincode>/langs/hi.js
./plugins/<plugincode>/langs/hr.js
./plugins/<plugincode>/langs/hu_HU.js
./plugins/<plugincode>/langs/id.js
./plugins/<plugincode>/langs/it.js
./plugins/<plugincode>/langs/ja.js
./plugins/<plugincode>/langs/kk.js
./plugins/<plugincode>/langs/ko_KR.js
./plugins/<plugincode>/langs/ms.js
./plugins/<plugincode>/langs/nb_NO.js
./plugins/<plugincode>/langs/nl.js
./plugins/<plugincode>/langs/pl.js
./plugins/<plugincode>/langs/pt_BR.js
./plugins/<plugincode>/langs/pt_PT.js
./plugins/<plugincode>/langs/ro.js
./plugins/<plugincode>/langs/ru.js
./plugins/<plugincode>/langs/sk.js
./plugins/<plugincode>/langs/sl_SI.js
./plugins/<plugincode>/langs/sv_SE.js
./plugins/<plugincode>/langs/th_TH.js
./plugins/<plugincode>/langs/tr.js
./plugins/<plugincode>/langs/uk.js
./plugins/<plugincode>/langs/vi.js
./plugins/<plugincode>/langs/zh_CN.js
./plugins/<plugincode>/langs/zh_TW.js

Bundling plugin language files

Plugin language files are separate from the main TinyMCE UI language files. Each plugin has its own language files located in plugins/<plugincode>/langs/.

  • Core UI language files: Located in langs/ (e.g., tinymce-premium/langs/ar.js)

  • Premium plugin language files: Located in plugins/<plugincode>/langs/ (e.g., tinymce-premium/plugins/advcode/langs/ar.js)

To bundle premium plugin language files, import them using the same module syntax as bundling plugins, but append /langs/<language>.js to the import path:

// Import the plugin
import 'tinymce-premium/plugins/advcode';
// Import the premium plugin's Arabic language file
import 'tinymce-premium/plugins/advcode/langs/ar.js';
// Import the main UI Arabic language file (if needed)
import 'tinymce-premium/langs/ar.js';

tinymce.init({
  selector: 'textarea',
  language: 'ar',
  plugins: 'advcode',
  // ... other configuration
});

For premium plugins from tinymce-premium, the language file path must include the .js extension.

Plugin lazy-loading and additional resources

Plugins lazy-load additional resources (JS and CSS files) at runtime for optimal performance. These resources must be:

  • Included in the bundle along with the plugin (recommended for bundled applications)

  • Placed as static assets in the expected location (for non-bundled deployments)

Missing resources may cause plugins to fail or display errors.

When bundling, explicitly import any additional resources that plugins require. The module bundler includes these files in the application bundle, making them available at runtime.

For non-bundled deployments using external_plugins, ensure all required resource files (CSS, JS, and language files) are accessible at the expected paths relative to the plugin file location.

See Additional plugin resources for specific examples of plugins that require additional resources.

Additional plugin resources

When bundling TinyMCE with module loaders (Webpack, Vite, Rollup), some plugins require additional resource files (CSS, JS, or language files) to be explicitly imported. These files are not automatically resolved by the bundler and must be imported manually.

Key points:

  • 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

  • Language files are typically located in plugins/<plugincode>/langs/

  • CSS files may be in plugins/<plugincode>/css/ or at the plugin root

  • English is the default language, so en.js language files don’t exist (plugins fall back to English)

Common plugin resource requirements

The following plugins require additional resource files when bundling:

Help plugin (help)

The Help plugin requires the keyboard navigation language file for the keyboard navigation tab to function properly:

Module Syntax Source Example

ES6+

npm

 
import 'tinymce/plugins/help/js/i18n/keynav/en';

.zip

 
import '../tinymce/plugins/help/js/i18n/keynav/en';

Common JS

npm

 
require('tinymce/plugins/help/js/i18n/keynav/en');

.zip

 
require('../tinymce/plugins/help/js/i18n/keynav/en');

Page Embed plugin (pageembed)

The Page Embed plugin requires a CSS file for proper styling:

Module Syntax Source Example

ES6+

npm

 
import 'tinymce-premium/plugins/pageembed/css/empa30.css';

.zip

 
import '../plugins/pageembed/css/empa30.css';

Common JS

npm

 
require('tinymce-premium/plugins/pageembed/css/empa30.css');

.zip

 
require('../plugins/pageembed/css/empa30.css');

Emoticons plugin (emoticons)

The Emoticons plugin requires an emoji database file. By default, it uses js/emojis.js, but you can also use js/emojiimages.js by configuring the emoticons_database option.

Module Syntax Source Example

ES6+

npm

 
import 'tinymce/plugins/emoticons/js/emojis';

.zip

 
import '../tinymce/plugins/emoticons/js/emojis';

Common JS

npm

 
require('tinymce/plugins/emoticons/js/emojis');

.zip

 
require('../tinymce/plugins/emoticons/js/emojis');