Bundling an npm version of TinyMCE with ES6 and Webpack

The following procedure will assist with bundling an npm 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

  • (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.

  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

    /* 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

    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

    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:

     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: