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: Installing TinyMCE.

Requirements

This guide requires the following:

Node.js and npm
Basic knowledge of how to use Webpack

Procedure

Download and unzip the latest version of TinyMCE:
- For customers with access to premium self-hosted TinyMCE, download the .zip file from Tiny Account: Downloads.
- For all other users, download the TinyMCE Dev Package from TinyMCE Self-hosted releases.
Add the following development dependencies to the project.
- webpack
- webpack-cli
- mini-css-extract-plugin
- html-webpack-plugin
- css-loader
  
  For example:
  npm install --save-dev \ webpack \ webpack-cli \ mini-css-extract-plugin \ html-webpack-plugin \ css-loader
Add tinymce and the following development dependencies to the project.
- webpack
- webpack-cli
- mini-css-extract-plugin
- html-webpack-plugin
- css-loader
  
  For example:
  npm install tinymce && npm install --save-dev \ webpack \ webpack-cli \ mini-css-extract-plugin \ html-webpack-plugin \ css-loader