Javascript 使用Froala编辑器配置对JS ES6作出反应

我是ReactJS的新手，我正在用ReactJS ES6做一个项目。在我的项目中，我使用Frola编辑器，它工作得非常好。但现在，我有一个新的功能，需要Froala编辑器添加输入文本，文本区域，所以Froala需要更多的配置。我不知道在ReactJS组件中的何处放置配置。这是我的反应组件

import FroalaEditor from 'react-froala-wysiwyg'
import FroalaEditorView from 'react-froala-wysiwyg/FroalaEditorView'

class RequestFormComponent extends Component {
    constructor(props) {
        super(props);

        this.handleModelChange = this.handleModelChange.bind(this);
        $.FroalaEditor.DefineIcon('insertInputField', {NAME: 'plus'});
        $.FroalaEditor.RegisterCommand('insertInputField', {
            title: 'Insert InputField',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
               this.html.insert(some input text);
            }
        });

        this.state = this._getState();
    }

    _getState() {
        return {
            content: "Some text",
            config: {
                toolbarButtons: ['undo', 'redo', 'clearFormatting', 'selectAll', 'html', 'insertInputField']
            }
        }
    }

    handleModelChange(model) {
        this.setState({content: model});
    }
    render() {
        return (
            <FroalaEditor
                 model={this.state.content}
                 onModelChange={this.handleModelChange}
                 config = {this.state.config}
            />
         )
     }

从“react-froala wysiwyg”导入froala编辑器
从“react-froala wysiwyg/FroalaEditorView”导入FroalaEditorView
类RequestFormComponent扩展组件{
建造师（道具）{
超级（道具）；
this.handleModelChange=this.handleModelChange.bind（this）；
$.FroalaEditor.DefineIcon（'insertInputField'，{NAME:'plus'}）；
$.FrolaEditor.RegisterCommand（'insertInputField'{
标题：“插入输入字段”，
焦点：对，
撤销：对，
refreshAfterCallback：对，
回调：函数（）{
this.html.insert（一些输入文本）；
}
});
this.state=this._getState（）；
}
_getState（）{
返回{
内容：“一些文字”，
配置：{
工具栏按钮：['undo'，'redo'，'clearFormatting'，'selectAll'，'html'，'insertInputField']
}
}
}
handleModelChange（模型）{
this.setState（{content:model}）；
}
render（）{
返回(
)
}

如果我这样配置，控制台将显示错误消息“无法读取未定义的属性'defineCon'”

我做了很多研究，但一无所获。

---

请给我一些建议来解决这个问题。

我认为您应该导入jquery:

---

从“jquery”导入$；

我认为您应该导入jquery:

---

从“jquery”导入$；

您必须导入jquery

import $ from 'jquery';

通过

npmijquery-s

命令安装jQuery

并且必须在componentDidMount方法中触发jQuery

componentDidMount() {
        $.FroalaEditor.DefineIcon('insertInputField', {NAME: 'plus'});
        $.FroalaEditor.RegisterCommand('insertInputField', {
            title: 'Insert InputField',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
               this.html.insert(some input text);
            }
        });

        this.state = this._getState();
}

---

您必须导入jQuery

import $ from 'jquery';

通过

npmijquery-s

命令安装jQuery

并且必须在componentDidMount方法中触发jQuery

componentDidMount() {
        $.FroalaEditor.DefineIcon('insertInputField', {NAME: 'plus'});
        $.FroalaEditor.RegisterCommand('insertInputField', {
            title: 'Insert InputField',
            focus: true,
            undo: true,
            refreshAfterCallback: true,
            callback: function () {
               this.html.insert(some input text);
            }
        });

        this.state = this._getState();
}