Bundling a .zip version of TinyMCE with ES6 and Webpack
The following procedure will assist with bundling a .zip
version of TinyMCE with Webpack using ES6+ syntax. The procedure assumes the user has experience with Webpack and ES6+ 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 */ import tinymce from '../tinymce/js/tinymce/tinymce'; /* Default icons are required. After that, import custom icons if applicable */ import '../tinymce/js/tinymce/icons/default/icons'; /* Required TinyMCE components */ import '../tinymce/js/tinymce/themes/silver/theme'; import '../tinymce/js/tinymce/models/dom/model'; /* Import a skin (can be a custom skin instead of the default) */ import '../tinymce/js/tinymce/skins/ui/oxide/skin.css'; /* Import plugins */ import '../tinymce/js/tinymce/plugins/advlist/plugin'; import '../tinymce/js/tinymce/plugins/code/plugin'; import '../tinymce/js/tinymce/plugins/emoticons/plugin'; import '../tinymce/js/tinymce/plugins/emoticons/js/emojis'; import '../tinymce/js/tinymce/plugins/link/plugin'; import '../tinymce/js/tinymce/plugins/lists/plugin'; import '../tinymce/js/tinymce/plugins/table/plugin'; /* 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'; */ /* content UI CSS is required */ import contentUiSkinCss from '../tinymce/js/tinymce/skins/ui/oxide/content.css'; /* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */ import contentCss from '../tinymce/js/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: 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, use: [ 'css-loader' ], }, ], }, 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
import * as editor from './editor'; const heading = () => { const element = document.createElement('h1'); element.innerText = 'TinyMCE Webpack demo'; return element; }; const editorArea = () => { const element = document.createElement('textarea'); element.id = 'editor'; return element; }; const parent = document.createElement('p'); parent.appendChild(editorArea()); document.body.appendChild(heading()); document.body.appendChild(parent); 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.