Question

我的以下反应组件显示跟随tinymce的错误，并且未安装在dom中。

theme.js：1未捕获的SyntaxError：意外的令牌＆lt;

tinymce.js：38447未捕获的TypeError：主题不是构造函数（...）

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

这是目录结构的问题。根据问题，它不支持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']
})

Answer 2

您应该在componentDidMount中初始化tinymce，而不是在componentWillMount中初始化。此外，您需要导出＆＃39; ParagraphDetails＆＃39;类。

Answer 3

现在你的代码不是纯粹的JSX，而是JSX。（JavaScript扩展）

theme.js：1未捕获的SyntaxError：意外的标记＆lt;

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

为此，您需要使用babel插件

tinymce.js：38447未捕获的TypeError：主题不是构造函数（...）

您无法在没有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",
    })
},

试试这个

$(function() {
$( "#tabs" ).tabs();
$('#tabs').find('a[href="#tabs-2"]').trigger('click');
});

Answer 4

如果您正在使用反应，请使用react-tinymce组件。

tinymce未捕获TypeError：主题不是构造函数（...）

4 个答案: