Bundling a .zip version of TinyMCE with CommonJS and Browserify

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

Procedure

  1. Download and unzip the latest version of TinyMCE:

  2. Add the following development dependencies to the project.

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

    const fs = require('fs');

/* Import TinyMCE */
const tinymce = require('../tinymce/js/tinymce/tinymce.js');

/* Default icons are required. After that, import custom icons if applicable */
require('../tinymce/js/tinymce/icons/default/icons.js');

/* Required TinyMCE components */
require('../tinymce/js/tinymce/themes/silver/theme.js');
require('../tinymce/js/tinymce/models/dom/model.js');

/* Import a skin (can be a custom skin instead of the default) */
require('../tinymce/js/tinymce/skins/ui/oxide/skin.css');

/* Import plugins - include the relevant plugin in the 'plugins' option. */
require('../tinymce/js/tinymce/plugins/advlist/plugin.js');
require('../tinymce/js/tinymce/plugins/code/plugin.js');
require('../tinymce/js/tinymce/plugins/emoticons/plugin.js');
require('../tinymce/js/tinymce/plugins/emoticons/js/emojis');
require('../tinymce/js/tinymce/plugins/link/plugin.js');
require('../tinymce/js/tinymce/plugins/lists/plugin.js');
require('../tinymce/js/tinymce/plugins/table/plugin.js');

/* content UI CSS is required */
const contentUiSkinCss = fs.readFileSync('tinymce/js/tinymce/skins/ui/oxide/content.css', { encoding: 'UTF-8' });

/* The default content CSS can be changed or replaced with appropriate CSS for the editor content. */
const contentCss = fs.readFileSync('tinymce/js/tinymce/skins/content/default/content.css', { encoding: 'UTF-8' });

/* Initialize TinyMCE */
exports.render = () => {
  tinymce.init({
    selector: 'textarea#editor',
    /* All plugins need to be imported and added to the plugins option. */
    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(),
  });
};

  4. Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.

    Example src/main.js

    const editor = require('./editor.js');
/* Create a textarea with id="editor" for the TinyMCE `selector` option */
const editorArea = () => {
  var element = document.createElement('textarea');
  element.id = 'editor';
  return element
};
/* Create a parent element for the textarea */
const parent = document.createElement('p');
/* Add elements to page */
parent.appendChild(editorArea());
document.body.appendChild(parent);
/* Initialize TinyMCE */
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 Browserify Demo</title>
  </head>
  <body>
    <h1>TinyMCE Browserify Demo</h1>
    <script src="main.bundle.js"></script>
  </body>
</html>

  5. Run Browserify to test the bundle, such as:

    browserify -t brfs -g browserify-css src/main.js -o dist/main.bundle.js

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