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.

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 and provides the base set of icons for all TinyMCE functionality. The default icons can be extended or overridden using additional icon packs.

    • A skin for styling the user interface, including toolbars and menus. This can be an open source, premium or custom skin.

    • A content skin for styling UI features within the content such as table and image resizing. This can be an open source, premium or custom skin.

    The global must be first, the rest can be in any order. When using premium plugins with a commercial license, the licensekeymanager plugin is also required.

    Additional components that are optional but recommended:

    • Content CSS for styling editor content. There are open source 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.

    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 the default skin (oxide). Replace with a custom skin if required. */
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 'tinymce/plugins/help';
import 'tinymce/plugins/help/js/i18n/keynav/en';

// Import premium plugins from NPM
import 'tinymce-premium/plugins/advcode';
import 'tinymce-premium/plugins/tinycomments';
// Always include the licensekeymanager plugin when using premium plugins with a commercial license.
import 'tinymce-premium/plugins/licensekeymanager';

/* content UI CSS is required (using the default oxide skin) */
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',
    license_key: 'gpl',
    plugins: 'advlist code emoticons link lists table help',
    toolbar: 'bold italic | bullist numlist | link emoticons',
    skin: false,
    content_css: false,
    content_style: contentUiSkinCss.toString() + '\n' + contentCss.toString(),
    /* Alternatively to importing premium plugins directly, you can configure external_plugins to load premium plugins in a different location.
     * Remember to include the licensekeymanager plugin when using premium plugins.
    */
    // external_plugins: {
    //   'advcode': '<path_to_premium_plugins>/advcode/plugin.min.js',
    //   'tinycomments': '<path_to_premium_plugins>/tinycomments/plugin.min.js'
    //   'licensekeymanager': '<path_to_premium_plugins>/licensekeymanager/plugin.min.js',
    // },

  });
};
    The gpl license key is for self-hosting TinyMCE under the GNU General Public License (GPL). To use a commercial license, or to include premium plugins, replace gpl with a valid license key. For details, see Setting the license.

  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: