Important changes to Tiny Cloud pricing > Find out more
Cart Checkout
Return to Website
Tiny logo
Get Free API Key

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 page

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: Integrate with other projects.

Requirements

This guide requires the following:

  • Node.js and npm
  • Basic knowledge of how to use Webpack

Procedure

  1. Download and unzip the latest version of TinyMCE:

  2. 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

  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

     /* 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(),
   });
 };

  4. 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,
   },
 };

  5. 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();

  6. 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:

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.