Question

我是ReactJS的新手，我正在用ReactJS ES6做一个项目。在我的项目中，我使用Froala Editor，它完美无缺。但是现在，我有一个新功能需要Froala Editor添加输入文本，文本区域因此Froala需要更多配置。我不知道在ReactJS组件中放置配置的位置。这是我的React组件。

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

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

我研究了很多，却一无所获。请给我一些建议来解决这个问题。

Answer 1

我认为你应该导入jquery：

import $ from 'jquery';

Answer 2

你必须导入jQuery。

import $ from 'jquery';

通过npm i jquery -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();
}

使用Froala编辑器配置实现JS ES6

2 个答案: