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 an npm version of TinyMCE with CommonJS and Webpack

Bundling an npm version of TinyMCE in a project using CommonJS and Webpack

Contribute to this page

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

    For example:

     npm install tinymce &&
     npm install --save-dev \
       webpack \
       webpack-cli \
       mini-css-extract-plugin \
       html-webpack-plugin \
       css-loader
    
  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 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

     /* Import TinyMCE */
     var tinymce = require('tinymce/tinymce');
    
     /* Default icons are required for TinyMCE 5.3 or above. Also import custom icons if applicable */
     require('tinymce/icons/default');
    
     /* A editor theme (required) - customize the editor appearance by creating a 'skin' */
     require('tinymce/themes/silver');
    
     /* Import the editor skin - replace with a custom skin if applicable. */
     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');
    
     /* Import content CSS */
     var contentUiCss = require('tinymce/skins/ui/oxide/content.css');
    
     /* Import the default content CSS, replace with the CSS for the editor content. */
     var contentCss = require('tinymce/skins/content/default/content.css');
    
     /* 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: contentUiCss.toString() + '\n' + contentCss.toString(),
       });
     };
    
  3. Update the project Webpack configuration to load the TinyMCE CSS and to optimize the TinyMCE assets.

    Example webpack.config.js

     var path = require('path');
     var MiniCssExtractPlugin = require('mini-css-extract-plugin');
     var HtmlWebpackPlugin = require('html-webpack-plugin');
    
     module.exports = {
       mode: 'development',
       entry: './src/index.js',
       resolve: {
         extensions: ['.js']
       },
       plugins: [
         new MiniCssExtractPlugin(),
         new HtmlWebpackPlugin({
           title: 'TinyMCE Webpack Demo',
           meta: {viewport: 'width=device-width, initial-scale=1'}
         }),
       ],
       module: {
         rules: [
           {
             test: /skin\.css$/i,
             use: [MiniCssExtractPlugin.loader, 'css-loader'],
           },
           {
             test: /content\.css$/i,
             loader: 'css-loader',
             options: {
               esModule: false,
             },
           },
         ],
       },
       optimization: {
         splitChunks: {
           chunks: 'all',
           cacheGroups: {
             tinymceVendor: {
               test: /[\\/]node_modules[\\/](tinymce)[\\/](.*js|.*skin.css)|[\\/]plugins[\\/]/,
               name: 'tinymce'
             },
           },
         }
       },
       output: {
         filename: '[name].js',
         path: path.resolve(__dirname, 'public'),
         clean: true,
       },
     };
    
  4. Add the TinyMCE assets and configuration into the project and provide a target element to initialize the editor.

    Example src/index.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 heading() {
       var element = document.createElement('h1');
       element.innerText = 'TinyMCE Webpack demo';
       return element
     }
     /* 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(heading());
     document.body.appendChild(parent);
     /* Initialize TinyMCE */
     editor.render();
    
  5. Run Webpack to test the bundle, such as:

     webpack --config webpack.config.js
    

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