tinymce uncaught TypeError: Theme is not a constructor(…)

Question

我的以下 React 组件在 tinymce 中显示以下错误，并且未在 dom 中挂载。

theme.js:1 未捕获的语法错误：意外的标记 <

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

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

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

出了什么问题？

Answer 1

您应该在 componentDidMount 中初始化 tinymce，而不是在 componentWillMount 中。此外，您需要导出 'ParagraphDetails' class.

Answer 2

现在你的代码不是纯粹的JS，而是JSX。（JavaScript 分机）

theme.js:1 Uncaught SyntaxError: Unexpected token <

此错误是由于 JSX。您需要将 JSX 转换为 JS，因为浏览器不了解 JSX。

为此，您需要使用 babel 插件

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

如果没有 DOM 元素，您将无法初始化您的库，因此请在 component 挂载后初始化您的库。

而不是这个

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

试试这个

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

Answer 3

如果在 React 中使用，请使用 react-tinymce 组件。

Answer 4

目录结构tinymce有问题。根据问题它不支持 webpack。

Here's github 问题的解决方案。

你需要 tinymce 和几个 webpack 加载器。

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

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

在文件中实现

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

tinymce uncaught TypeError: Theme is not a constructor(…)

tinymce uncaught TypeError: Theme is not a constructor(…)

javascript

tinymce

tinymce-4

reactjs