Usage with module loaders

TinyMCE can easily be installed with npm and used with module loaders such as Webpack and Browserify with just a few cautions to keep in mind.

The first thing you have to decide is how to load your modules.

ES2015 modules

If you are using ES2015 modules, a simple example could look something like this.

// Import TinyMCE
import tinymce from 'tinymce/tinymce';

// A theme is also required
import 'tinymce/themes/modern/theme';

// Any plugins you want to use has to be imported
import 'tinymce/plugins/paste';
import 'tinymce/plugins/link';

// Initialize the app
tinymce.init({
  selector: '#tiny',
  plugins: ['paste', 'link']
});

CommonJS modules

If you are using CommonJS modules, the example looks pretty much the same, only using the different require function to import the dependencies.

// Import TinyMCE
var tinymce = require('tinymce/tinymce');

// A theme is also required
require('tinymce/themes/modern/theme');

// Any plugins you want to use has to be imported
require('tinymce/plugins/paste');
require('tinymce/plugins/link');

// Initialize the app
tinymce.init({
  selector: '#tiny',
  plugins: ['paste', 'link']
});

Getting the skin

TinyMCE will not work without a skin, which consists of some fonts and CSS files used by the editor. By default TinyMCE looks for these files in a /skins directory located in your root directory, although this can be configured in the init object.

No matter where you choose to put it you need a skin, and the quickest way to get started is to copy the skin that comes packaged with TinyMCE, located in node_modules/tinymce/skins - either manually copying the files in the finder/file explorer, or using the terminal with a command something like this:

MacOS and Linux

cp -r node_modules/tinymce/skins skins

Windows

xcopy /I /E node_modules/tinymce/skins skins

Webpack file-loader

If you are using Webpack, another option is to use the file loader together with the require.context function to copy the skins directory by adding these lines before your call to the TinyMCE init function:

require.context(
  'file?name=[path][name].[ext]&context=node_modules/tinymce!tinymce/skins',
  true,
  /.*/
);

What this does is more or less the same thing as the command line stuff above - it copies the skins directory from node_modules/tinymce to your output directory as defined in your Webpack configuration. This is handy because you can easily move the output directory of your build without having to copy over the skins folder manually - webpack will take care of it for you.

Unfortunately, we haven't found any equivalently easy-to-use way to handle this for Browserify builds, but please use the "Contribute to this page"-link at the top of this page and make a pull request if you have any ideas.

Minification with UglifyJS2

UglifyJS2, one of the most popular JS minification tools, will corrupt TinyMCE unless ascii-only is set.

This can happen when it is used directly or through module bundler. In Webpack, -p CLI option cannot be used to bundle TinyMCE, and instead, you'll need to configure minification explicitly:

plugins: [
  new webpack.optimize.UglifyJsPlugin({
      /*...*/
      output: {
        "ascii_only": true
      }
  })
]

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.