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 Tiny Cloud, dependencies and additional resources are automatically loaded. The information below applies to self-hosted installations using NPM or ZIP packages. All examples in this guide use NPM package import paths.

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. When using premium plugins with a commercial license, the licensekeymanager plugin is also required.

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.

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

Plugins requiring additional resources

  • Emoticons: Requires an emoji database file (js/emojis.js)

  • Help: Requires a keyboard navigation language file (js/i18n/keynav/<lang>.js)

  • 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. For a full list of plugin dependencies, see each plugin’s documentation page.

CSS files

Some plugins require additional CSS files. Plugin CSS files are included automatically when importing plugins via their JS file.

When using skins, you must import both:

  • The skin CSS file (skin.css or skin.js)

  • The content skin CSS file (content.css or content.js)

Importing the skin.js and content.js files is an alternative way to load skin styles besides CSS imports. For bundlers like Webpack and Browserify that require additional setup to support CSS imports, the CSS examples in Bundling skins remain valid.

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

For community packages:

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. The editor’s language option must be set to the desired language for the plugin’s language file to take effect.

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

// Premium plugin language file
import 'tinymce-premium/plugins/<plugincode>/langs/<language>.js';

  • US English is the default language, so the language packs do not include en.js language files (see language option). Note that the Help and Autocorrect plugins have their own en.js files.

  • Examples include the .js extension for clarity; most bundlers can resolve file extensions automatically.

For more information, see UI localizations.

Next steps