global tinymce using webpack provideplugin

[w-]

I know the docs say that tinymce needs to be globally accessible and they use the example of using a script tag to the cdn

I wanted to use webpack and the providePlugin in order to accomplish the same thing. In my webpack config i'll have

plugins: [
    new webpack.providePlugin( {'tinymce': 'tinymce/tinymce'} )
]

when i load the page, the console throws an error

tinymce.init() is not a function

if i debug in the console, I can see that tinymce is an object that contains another object called tinymce.

I was under the impression that loading 'tinymce/tinymce' should have resolved that.

Can anyone help advise what I may have missed?

[mehulcse]

Hope this will help.

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(!)

• https://github.com/tinymce/tinymce/issues/2836
• by @hkjorgensen

[mfbx9da4]

@mehulcse please learn to use markdown

[ghost]

@mehulcse You could basically provide a link to issue without own text. You copied web pack 1 config witch is not the current version 2+