How to get TinyMCE to work with webpack and babel

I have a couple of projects that uses TinyMCE and I think it’s one of the better editors when HTML is the document model.

I wanted to use TinyMCE with a webpack setup so I tried: npm i --save tinymce and then import tinymce from 'tinymce' - but that didn’t work.

After some time researching I got a solution to work. I just want to share it here if it can help others with the same issue. A couple of people have already asked for it.

This is not an issue but just a simple guide to get up and running 😃

Requirements

A working webpack setup with Babel (es2015 presets)

Dependencies

You need tinymce and a couple of loaders for webpack.

npm i --save tinymce
npm i --save-dev imports-loader exports-loader

Webpack config

Use window as this in the wrapping function generated by webpack

const config = {
  module: {
    loaders: [
      {
        test: require.resolve('tinymce/tinymce'),
        loaders: [
          'imports?this=>window',
          'exports?window.tinymce'
        ]
      },
      {
        test: /tinymce\/(themes|plugins)\//,
        loaders: [
          'imports?this=>window'
        ]
      }    
    ]
  }
}

Implementation

Create a file in your source and add the following:

// Core - these two are required :-)
import tinymce from 'tinymce/tinymce'
import 'tinymce/themes/modern/theme'

// Plugins
import 'tinymce/plugins/paste/plugin'
import 'tinymce/plugins/link/plugin'
import 'tinymce/plugins/autoresize/plugin'

// Initialize
tinymce.init({
  selector: '#tinymce',
  skin: false,
  plugins: ['paste', 'link', 'autoresize']
})

I’ve added skin: false because I assume the project want to use it’s own pipeline to provide the CSS as a bundle. TinyMCE won’t work until the CSS is included(!)

[Darkside73]

@fyrkant Thanks for the great workaround with require.context. But there is a small notice to get things work: you should overwrite any loaders by putting ! at the beginning:

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

In this case webpack emit the actual content of CSS files instead of JS wrapping

[ghost]

@fyrkant Where do we put the:

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

I have been trying to get tinymce to function with webpack, but none of the css is functioning. (It correctly finds the field, and initializes, but no css is showing / rendering. (It just makes a blank space.)