ReactJS 应用程序中的 Froala：内联编辑

Question

我正在构建一个应用程序，我想在其中包含 froala 编辑器。我对使用这些类型的插件还很陌生，我在 "translating" ReactJS 上遇到了麻烦。我通读了 Froala 的 ReactJS 文档，但是，我似乎无法让它工作。

这是他们建议用于在 <div id="froala-editor"> 上进行内联编辑的 JS 代码：

 <script>
     $(function() {
         $('div#froala-editor').froalaEditor({
             toolbarInline: true,
             charCounterCount: false,
             toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'],
            toolbarVisibleWithoutSelection: true
        })
  });
</script>

在他们的文档中说使用传递选项作为组件属性，因此我尝试了这个：

class App extends Component {
    constructor(props) {
        super(props);
        this.state = {
            model : "Edit me"
        }
    }
    render() {
        return (
            <FroalaEditor 
                tag='textarea'
                model={this.state.model}
                toolbarInline={true}
                charCounterCount={false}
                toolbarButtons={ ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo']}
                toolbarVisibleWithoutSelection={true}
            />
        );
    }
}

将配置定义为变量也不起作用。谁能告诉我哪里做错了，正确的做法是什么？

Answer 1

没关系，我刚开始工作。如果其他人遇到此问题：

我加了

config={this.state.configs}

作为 <FroalaEditor> 组件的属性，并指定状态中的配置。这些是我为我的案例指定的设置：

configs : {
            toolbarInline: true,
            charCounterCount: false,
            toolbarButtons: ['bold', 'italic', 'underline', 'strikeThrough', 'subscript', 'superscript', '-', 'paragraphFormat', 'align', 'formatOL', 'formatUL', 'indent', 'outdent', '-', 'insertImage', 'insertLink', 'insertFile', 'insertVideo', 'undo', 'redo'],
            toolbarVisibleWithoutSelection: true
        }

ReactJS 应用程序中的 Froala：内联编辑

Froala in ReactJS application: Inline editing

wysiwyg

reactjs

froala