Bundling an npm version of TinyMCE with CommonJS and Browserify

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

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

    const fs = require('fs');

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

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

/* Required TinyMCE components */
require('tinymce/themes/silver');
require('tinymce/models/dom');

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

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

/* content UI CSS is required */
const contentUiSkinCss = fs.readFileSync('node_modules/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('node_modules/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(),
  });
};

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

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