My following react ponent show following error with tinymce and did not mount in dom.

theme.js:1 Uncaught SyntaxError: Unexpected token <

tinymce.js:38447 Uncaught TypeError: Theme is not a constructor(…)

import React from "react";
import tinymce from "tinymce";

const ParagraphDetails = React.createClass({
    ponentWillMount(){
        tinymce.init({
            selector: ".tinymce-editor",
            themes: "modern",
        })
    },
    render(){
        return <div>
            <label>About
                <textarea rows="3" className="tinymce-editor"></textarea>
            </label>
        </div>
    }
});

What is going wrong?

My following react ponent show following error with tinymce and did not mount in dom.

theme.js:1 Uncaught SyntaxError: Unexpected token <

tinymce.js:38447 Uncaught TypeError: Theme is not a constructor(…)

import React from "react";
import tinymce from "tinymce";

const ParagraphDetails = React.createClass({
    ponentWillMount(){
        tinymce.init({
            selector: ".tinymce-editor",
            themes: "modern",
        })
    },
    render(){
        return <div>
            <label>About
                <textarea rows="3" className="tinymce-editor"></textarea>
            </label>
        </div>
    }
});

What is going wrong?

• javascript
• reactjs
• tinymce
• tinymce-4

4 Answers 4

It's an issue with directory structure tinymce. As per issue It does not support the webpack.

Here's the solution on github issues.

You need tinymce and a couple of loaders for webpack.

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

Webpack config

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 in a file

// 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']
})

You should initialize tinymce in ponentDidMount , and not in ponentWillMount. Also, you need to export 'ParagraphDetails' class.

Right now your code is not pure JS, It's JSX. (JavaScript Extension)

theme.js:1 Uncaught SyntaxError: Unexpected token <

This error is because of JSX. You need to convert JSX to JS since browser don't have knowledge of JSX.

In order to do this you need to use babel plugin

tinymce.js:38447 Uncaught TypeError: Theme is not a constructor(…)

You can't initialize your library without DOM element, So initialize your library after ponent gets mounted.

Instead of this

ponentWillMount(){
    tinymce.init({
        selector: ".tinymce-editor", //you don't have this element as of now
        themes: "modern",
    })
},

Try this

ponentDidMount(){
    tinymce.init({
        selector: ".tinymce-editor", //you'll have this element in DOM
        themes: "modern",
    })
},

Use react-tinymce ponent if you are using in react.