Important changes to Tiny Cloud pricing > Find out more

NOTE: TinyMCE 5 reached End of Support in April 2023. No more bug fixes, security updates, or new features will be introduced to TinyMCE 5. We recommend you upgrade to TinyMCE 6 or consider TinyMCE 5 Long Term Support (LTS) if you need more time.

Bundling a .zip version of TinyMCE with CommonJS and Browserify

Bundling a .zip archive version of TinyMCE in a project using CommonJS and Browserify

Contribute to this page

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: Integrate with other projects.

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.

    For example:

     npm install --save-dev \
       promise-polyfill \
       browserify \
       browserify-css \
       brfs
    
  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 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

     var fs = require('fs');
    
     /* Import TinyMCE */
     var tinymce = require('../tinymce/js/tinymce/tinymce.js');
    
     /* Default icons are required for TinyMCE 5.3 or above. Also import custom icons if applicable */
     require('../tinymce/js/tinymce/icons/default/icons.js');
    
     /* A editor theme (required) - customize the editor appearance by creating a 'skin' */
     require('../tinymce/js/tinymce/themes/silver/theme.js');
    
     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');
    
     /* Import content CSS */
     var contentCssUi = fs.readFileSync('tinymce/js/tinymce/skins/ui/oxide/content.css', {encoding: 'UTF-8'});
     /* Import the default content CSS, replace with the CSS for the editor content. */
     var contentCss = fs.readFileSync('tinymce/js/tinymce/skins/content/default/content.css', {encoding: 'UTF-8'});
    
     /* Initialize TinyMCE */
     exports.render = function () {
       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: contentCss.toString() + '\n' + contentCssUi.toString(),
       });
     };
    
  4. Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.

    Example src/main.js

     var editor = require('./editor.js');
     /* Create a parent element for the textarea */
     var parent = document.createElement('p');
     /* Create a textarea with id="editor" for the TinyMCE `selector` option */
     function editorArea() {
       var element = document.createElement('textarea');
       element.id = 'editor';
       return element
     }
     /* 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:

Can't find what you're looking for? Let us know.

Except as otherwise noted, the content of this page is licensed under the Creative Commons BY-NC-SA 3.0 License, and code samples are licensed under the Apache 2.0 License.