Bundling an npm version of TinyMCE with ES6 and Rollup.js

The following procedure will assist with bundling an npm version of TinyMCE with Rollup.js using ES6+ syntax. The procedure assumes the user has experience with Rollup.js and ES6+ syntax. The following steps provide a working example for bundling a basic TinyMCE configuration with Rollup.js, 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 Rollup.js

  • (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 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';
    
    /* Default icons are required. After that, import custom icons if applicable */
    import 'tinymce/icons/default';
    
    /* Required TinyMCE components */
    import 'tinymce/themes/silver';
    import 'tinymce/models/dom';
    
    /* Import a skin (can be a custom skin instead of the default) */
    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 by replacing <plugincode> */
    /* NOTE: Download separately and add these to /src/plugins */
    /* import './plugins/<plugincode>'; */
    
    /* content UI CSS is required */
    import contentUiSkinCss from '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/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(),
      });
    };
  3. Update the project Rollup.js configuration to load the TinyMCE CSS.

    Example rollup.config.js

    import postcss from 'rollup-plugin-postcss';
    import commonjs from '@rollup/plugin-commonjs';
    import { nodeResolve } from '@rollup/plugin-node-resolve';
    
    export default {
      input: 'src/index.js',
      plugins: [
        nodeResolve(),
        commonjs(),
        postcss({
          include: "**/skin.css",
          inject: false,
          extract: true
        }),
        postcss({
          include: "**/content.css",
          inject: false,
          extract: false
        })
      ],
      output: {
        file: 'dist/main.bundle.js',
        format: 'umd'
      }
    };
  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';
    
    const editorArea = () => {
      const element = document.createElement('textarea');
      element.id = 'editor';
      return element
    };
    
    const parent = document.createElement('p');
    parent.appendChild(editorArea());
    document.body.appendChild(parent);
    
    editor.render();

    Example demo.html

    <!DOCTYPE html>
    <html lang="en">
      <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>TinyMCE Rollup Demo</title>
        <link rel="stylesheet" href="main.bundle.css">
      </head>
      <body>
        <h1>TinyMCE Rollup Demo</h1>
        <script src="main.bundle.js"></script>
      </body>
    </html>
  5. Run Rollup.js to test the bundle, such as:

    rollup --config

    If Rollup.js runs successfully, check that the editor loads in the application. If Rollup.js 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: