Usage with module loaders
How to use TinyMCE in a project using a module bundler like Webpack or Browserify
Contribute to this pageTinyMCE 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
}
})
]
Was this article helpful? Yes - No
Well, that's awkward . Would you mind opening an issue or helping us out?
Thanks for the feedback!
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.