--- title: "Bundling an npm version of TinyMCE with ES6 and Webpack" description: "Bundling an npm version of TinyMCE in a project using ES6 and Webpack" canonical_url: "https://www.tiny.cloud/docs/tinymce/latest/webpack-cjs-npm/" md_url: "https://www.tiny.cloud/docs/tinymce/5/webpack-cjs-npm/index.md" version: "5" last_updated: "2024-04-09T10:06:54Z" tokens: 1776 --- 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-npm/). # Bundling an npm version of TinyMCE with ES6 and Webpack The following procedure will assist with bundling an npm version of TinyMCE with [Webpack](https://webpack.js.org/) using [ES6+ syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). The procedure assumes the user has experience with [Webpack](https://webpack.js.org/) and [ES6+ syntax](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Modules). 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/) - (Optional: For premium features) The latest premium `.zip` bundle of TinyMCE for including premium plugins ## Procedure 1. Add `tinymce` and 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 tinymce && npm install --save-dev \ webpack \ webpack-cli \ mini-css-extract-plugin \ html-webpack-plugin \ css-loader ``` 2. 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 */ import tinymce from 'tinymce'; /* Default icons are required for TinyMCE 5.3 or above */ import 'tinymce/icons/default'; /* A theme is also required */ import 'tinymce/themes/silver'; /* Import the skin */ import 'tinymce/skins/ui/oxide/skin.css'; /* Import plugins */ import 'tinymce/plugins/advlist'; import 'tinymce/plugins/code'; import 'tinymce/plugins/emoticons'; import 'tinymce/plugins/emoticons/js/emojis'; import 'tinymce/plugins/link'; import 'tinymce/plugins/lists'; import 'tinymce/plugins/table'; /* Import premium plugins */ /* NOTE: Download separately and add these to /src/plugins */ /* import './plugins/checklist/plugin'; */ /* import './plugins/powerpaste/plugin'; */ /* import './plugins/powerpaste/js/wordimport'; */ /* Import content css */ import contentUiCss from 'tinymce/skins/ui/oxide/content.css'; import contentCss from 'tinymce/skins/content/default/content.css'; /* Initialize TinyMCE */ export function render () { tinymce.init({ selector: 'textarea#editor', 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(), }); }; ``` 3. Update the project Webpack configuration to load the TinyMCE CSS and to optimize the TinyMCE assets. Example `webpack.config.js` ```js const path = require('path'); const MiniCssExtractPlugin = require('mini-css-extract-plugin'); const 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, use: ['css-loader'], }, ], }, optimization: { splitChunks: { chunks: 'all', cacheGroups: { tinymceVendor: { test: /[\/]node_moduleslink:tinymce[\/]link:.*js|.*skin.css[\/]|[\/]plugins[\/]/, name: 'tinymce' }, }, } }, output: { filename: '[name].js', path: path.resolve(__dirname, 'dist'), clean: true, }, }; ``` 4. Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor. Example `src/index.js` ```js import * as editor from './editor'; function heading() { const element = document.createElement('h1'); element.innerText = 'TinyMCE Webpack demo'; return element; } const parent = document.createElement('p'); function editorArea() { const element = document.createElement('textarea'); element.id = 'editor'; return element; } parent.appendChild(editorArea()); document.body.appendChild(heading()); document.body.appendChild(parent); editor.render(); ``` 5. 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/).