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.
-
For example:
npm install --save-dev \ webpack \ webpack-cli \ mini-css-extract-plugin \ html-webpack-plugin \ css-loader
-
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
dom
model -
The
default
icon pack. This is always 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 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.
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. This can be a premium or custom icon pack.
Example
src/editor.js
/* Import TinyMCE */ const tinymce = require('../tinymce/js/tinymce/tinymce.js'); /* Default icons are required. After that, import custom icons if applicable */ require('../tinymce/js/tinymce/icons/default/icons.js'); /* Required TinyMCE components */ require('../tinymce/js/tinymce/themes/silver/theme.js'); require('../tinymce/js/tinymce/models/dom/model.js'); /* Import a skin (can be a custom skin instead of the default) */ 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'); /* content UI CSS is required */ const contentUiSkinCss = require('../tinymce/js/tinymce/skins/ui/oxide/content.css'); /* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */ const contentCss = require('../tinymce/js/tinymce/skins/content/default/content.css'); /* Initialize TinyMCE */ exports.render = () => { 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: contentUiSkinCss.toString() + '\n' + contentCss.toString(), }); };
-
-
Update the project Webpack configuration to load the TinyMCE CSS and to optimize the TinyMCE assets.
Example
webpack.config.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, loader: 'css-loader', options: { esModule: false, }, }, ], }, optimization: { splitChunks: { chunks: 'all', cacheGroups: { tinymceVendor: { test: /[\\/](tinymce)[\\/](.*js|.*skin.css)|[\\/]plugins[\\/]/, name: 'tinymce' }, }, } }, output: { filename: '[name].js', path: path.resolve(__dirname, 'public'), clean: true, }, };
-
Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.
Example
src/index.js
const editor = require('./editor.js'); /* Create a textarea with id="editor" for the TinyMCE `selector` option */ const heading = () => { const element = document.createElement('h1'); element.innerText = 'TinyMCE Webpack demo'; return element }; /* Create a textarea with id="editor" for the TinyMCE `selector` option */ const editorArea = () => { const element = document.createElement('textarea'); element.id = 'editor'; return element }; /* Create a parent element for the textarea */ const parent = document.createElement('p'); /* Add elements to page */ parent.appendChild(editorArea()); document.body.appendChild(heading()); document.body.appendChild(parent); /* Initialize TinyMCE */ editor.render();
-
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:
-
Adding TinyMCE plugins to the bundle, see: Bundling TinyMCE plugins using module loading.
-
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.
-
Creating custom editor content CSS, see: Content appearance options -
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.
-
Creating a custom skin for TinyMCE, see: Create a skin for TinyMCE.
-
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.
-
Creating a custom icon pack for TinyMCE, see: Create an icon pack for TinyMCE.
-
Localizing the TinyMCE user interface using a language pack, see: Bundling the User Interface localizations for TinyMCE.