--- title: "Bundling a .zip version of TinyMCE with CommonJS and Webpack" description: "Bundling a .zip archive version of TinyMCE in a project using CommonJS and Webpack" canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webpack-cjs-download/" md_url: "https://www.tiny.cloud/docs/tinymce/5/webpack-cjs-download/index.md" version: "5" last_updated: "2024-04-09T10:06:54Z" tokens: 1991 --- Important This page documents TinyMCE 5. For new projects, Tiny recommends using the latest, most up-to-date version. [See TinyMCE 8 documentation](../../latest/webpack-cjs-download/). # Bundling a .zip version of TinyMCE with CommonJS and Webpack The following procedure will assist with bundling a `.zip` version of TinyMCE with [Webpack](https://webpack.js.org/) using [CommonJS syntax](http://www.commonjs.org/specs/modules/1.0/). The procedure assumes the user has experience with [Webpack](https://webpack.js.org/) and [CommonJS syntax](http://www.commonjs.org/specs/modules/1.0/). The following steps provide a working example for bundling a basic TinyMCE configuration with [Webpack](https://webpack.js.org/), 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](../integrations/). ## Requirements This guide requires the following: - Node.js and npm - Basic knowledge of how to use [Webpack](https://webpack.js.org/) ## Procedure 1. 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](/my-account/downloads/). - For all other users, download the **TinyMCE *Dev*** Package from [TinyMCE Self-hosted releases](/get-tiny/self-hosted/). 2. Add the following development dependencies to the project. - [`webpack`](https://www.npmjs.com/package/webpack) - [`webpack-cli`](https://www.npmjs.com/package/webpack-cli) - [`mini-css-extract-plugin`](https://www.npmjs.com/package/mini-css-extract-plugin) - [`html-webpack-plugin`](https://www.npmjs.com/package/html-webpack-plugin) - [`css-loader`](https://www.npmjs.com/package/css-loader) For example: ```sh npm install --save-dev \ webpack \ webpack-cli \ mini-css-extract-plugin \ html-webpack-plugin \ css-loader ``` 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` ```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 */ require('../tinymce/js/tinymce/icons/default/icons.js'); /* A editor theme (required) - customize the editor appearance by creating a 'skin' */ require('../tinymce/js/tinymce/themes/silver/theme.js'); /* Import the editor skin - replace with a custom skin if applicable. */ require('../tinymce/js/tinymce/skins/ui/oxide/skin.css'); /* Import plugins - include the relevant plugin in the 'plugins' option. */ require('../tinymce/js/tinymce/plugins/advlist/plugin.js'); require('../tinymce/js/tinymce/plugins/code/plugin.js'); require('../tinymce/js/tinymce/plugins/emoticons/plugin.js'); require('../tinymce/js/tinymce/plugins/emoticons/js/emojis'); require('../tinymce/js/tinymce/plugins/link/plugin.js'); require('../tinymce/js/tinymce/plugins/lists/plugin.js'); require('../tinymce/js/tinymce/plugins/table/plugin.js'); /* 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 () { tinymce.init({ 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` ```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` ```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 */ parent.appendChild(editorArea()); document.body.appendChild(heading()); document.body.appendChild(parent); /* Initialize TinyMCE */ editor.render(); ``` 6. Run Webpack to test the bundle, such as: ```sh 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: - Adding TinyMCE plugins to the bundle, see: [Bundling TinyMCE plugins using module loading](../bundling-plugins/). - Using editor content CSS provided by Tiny, including premium CSS included with the Tiny Skins and Icon Packs, see: [Bundling TinyMCE content CSS using module loading](../content-css/). - Creating custom editor content CSS, see: [Content appearance options - `content_css`](../content-appearance/#content_css). - Using TinyMCE skins provided by Tiny, including premium skins included with the Tiny Skins and Icon Packs, see: [Bundling TinyMCE skins using module loading](../bundling-skins/). - Creating a custom skin for TinyMCE, see: [Create a skin for TinyMCE](../creating-a-skin/). - Using icon packs provided by Tiny, including premium icons packs included with the Tiny Skins and Icon Packs, see: [Bundling TinyMCE icon packs using module loading](../bundling-icons/). - Creating a custom icon pack for TinyMCE, see: [Create an icon pack for TinyMCE](../creating-an-icon-pack/). - Localizing the TinyMCE user interface using a language pack, see: [Bundling the User Interface localizations for TinyMCE](../bundling-localization/).