Bundling a .zip version of TinyMCE with CommonJS and Webpack

The following procedure will assist with bundling a .zip version of TinyMCE with Webpack using CommonJS syntax. The procedure assumes the user has experience with Webpack and CommonJS syntax. The following steps provide a working example for bundling a basic TinyMCE configuration with Webpack, and provides links to reference pages at the end of the procedure for bundling additional customizations with the editor.

If TinyMCE will be used with a JavaScript framework (such as React.js, Angular, or Vue.js) the bundle will also require the relevant framework integration package (where available). For a list of supported framework integrations, see: Integrate with other projects.


This guide requires the following:

  • Node.js and npm

  • Basic knowledge of how to use Webpack


  1. Download and unzip the latest version of TinyMCE:

  2. Add the following development dependencies to the project.

  3. Create a new source file for importing the required components from TinyMCE and configuring the editor.

    The following components are required to bundle TinyMCE:

    • The tinymce global

    • The silver theme

    • The default icon pack. It is required, but the default icons can be overridden using a custom or premium icon pack.

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

    The following components are likely required:

    • Content CSS for styling editor content. This can be a community, premium, or custom content CSS.

    • Any 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 src/editor.js

    /* Import TinyMCE */
    var tinymce = require('../tinymce/js/tinymce/tinymce.js');
    /* Default icons are required for TinyMCE 5.3 or above. Also import custom icons if applicable */
    /* A editor theme (required) - customize the editor appearance by creating a 'skin' */
    /* Import the editor skin - replace with a custom skin if applicable. */
    /* Import plugins - include the relevant plugin in the 'plugins' option. */
    /* Import content CSS */
    var contentUiCss = require('../tinymce/js/tinymce/skins/ui/oxide/content.css');
    /* Import the default content CSS, replace with the CSS for the editor content. */
    var contentCss = require('../tinymce/js/tinymce/skins/content/default/content.css');
    /* Initialize TinyMCE */
    exports.render = function () {
        selector: 'textarea#editor',
        /* All plugins need to be imported and added to the plugins option. */
        plugins: 'advlist code emoticons link lists table',
        toolbar: 'bold italic | bullist numlist | link emoticons',
        skin: false,
        content_css: false,
        content_style: contentUiCss.toString() + '\n' + contentCss.toString(),
  4. Update the project Webpack configuration to load the TinyMCE CSS and to optimize the TinyMCE assets.

    Example webpack.config.js

    var path = require('path');
    var MiniCssExtractPlugin = require('mini-css-extract-plugin');
    var HtmlWebpackPlugin = require('html-webpack-plugin');
    module.exports = {
      mode: 'development',
      entry: './src/index.js',
      resolve: {
        extensions: ['.js']
      plugins: [
        new MiniCssExtractPlugin(),
        new HtmlWebpackPlugin({
          title: 'TinyMCE Webpack Demo',
          meta: {viewport: 'width=device-width, initial-scale=1'}
      module: {
        rules: [
            test: /skin.css$/i,
            use: [MiniCssExtractPlugin.loader, 'css-loader'],
            test: /content.css$/i,
            loader: 'css-loader',
            options: {
              esModule: false,
      optimization: {
        splitChunks: {
          chunks: 'all',
          cacheGroups: {
            tinymceVendor: {
              test: /link:tinymce[\/]link:.*js|.*skin.css[\/]|[\/]plugins[\/]/,
              name: 'tinymce'
      output: {
        filename: '[name].js',
        path: path.resolve(__dirname, 'public'),
        clean: true,
  5. Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.

    Example src/index.js

    var editor = require('./editor.js');
    /* Create a parent element for the textarea */
    var parent = document.createElement('p');
    /* Create a textarea with id="editor" for the TinyMCE `selector` option */
    function heading() {
      var element = document.createElement('h1');
      element.innerText = 'TinyMCE Webpack demo';
      return element
    /* Create a textarea with id="editor" for the TinyMCE `selector` option */
    function editorArea() {
      var element = document.createElement('textarea');
      element.id = 'editor';
      return element
    /* Add elements to page */
    /* Initialize TinyMCE */
  6. Run Webpack to test the bundle, such as:

    webpack --config webpack.config.js

    If Webpack runs successfully, check that the editor loads in the application. If Webpack fails, review any errors and review the configuration changes in this procedure; you may need to adjust for conflicts or other issues when bundling TinyMCE into an existing project.

Next Steps

For information on: