Bundling TinyMCE - Overview

This guide provides an overview of bundling TinyMCE with module bundlers such as Webpack, Vite, Rollup, or Browserify. For bundler-specific setup instructions, see Introduction to bundling TinyMCE.

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

TinyMCE 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

The following components are required to bundle TinyMCE:

  • The tinymce global

  • The silver theme

  • The dom model

  • The default icon pack. This is always required and provides the base set of icons for all TinyMCE functionality. The default icons can be extended or overridden using additional icon packs.

  • A skin for styling the user interface, including toolbars and menus. This can be a community, premium or custom skin.

  • A content skin for styling UI features within the content such as table and image resizing. This can be a community, premium or custom skin.

The global must be first, the rest can be in any order.

Additional components that are optional but recommended:

  • Content CSS for styling editor content. There are community and premium style skins available, or use custom content CSS.

  • Plugins to be used with the editor.

  • A custom or premium icon pack to extend or override the default icons for toolbar buttons, including contextual toolbars. This can be a premium or custom icon pack.

Example: Basic required imports

/* 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:

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

import 'tinymce/plugins/<plugincode>';

Premium plugins

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

When using premium plugins with a commercial license, you must include the licensekeymanager plugin:

import 'tinymce-premium/plugins/licensekeymanager';

For more information, see Using premium plugins.

For detailed information on bundling plugins, see 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:

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/<lang>)

  • 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 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 Bundling skins.

Language files

Language files are optional and used for localizing the TinyMCE UI and plugin interfaces.

Core UI language files

import 'tinymce/langs/<language>.js';

For premium packages:

import 'tinymce-premium/langs/<language>.js';

Plugin language files

Plugin language files are separate from the main UI language files:

// Community plugin language file
import 'tinymce/plugins/<plugincode>/langs/<language>.js';

// Premium plugin language file (note: .js extension required)
import 'tinymce-premium/plugins/<plugincode>/langs/<language>.js';

  • 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 UI localizations.

Next steps