Bundling a .zip version of TinyMCE with ES6 and Webpack
Bundling a .zip archive version of TinyMCE in a project using ES6 and Webpack
Contribute to this pageThe 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: Integrate with other projects.
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.
- For customers with access to premium self-hosted TinyMCE, download the
-
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
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
/* Import TinyMCE */ import tinymce from '../tinymce/js/tinymce/tinymce'; /* Default icons are required for TinyMCE 5.3 or above */ import '../tinymce/js/tinymce/icons/default/icons'; /* A theme is also required */ import '../tinymce/js/tinymce/themes/silver/theme'; /* Import the skin */ 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'; */ /* Import content css */ import contentUiCss from '../tinymce/js/tinymce/skins/ui/oxide/content.css'; 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: contentUiCss.toString() + '\n' + contentCss.toString(), }); };
- The
-
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'; 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();
-
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.
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
Can't find what you're looking for? Let us know.
Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.