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

【问题标题】：Froala in ReactJS application: Inline editingReactJS 应用程序中的 Froala：内联编辑
【发布时间】：2018-01-26 15:53:03
【问题描述】：

我正在构建一个应用程序，我想在其中包含 froala 编辑器。我对使用这些类型的插件非常陌生，并且在将其“翻译”为 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}
            />
        );
    }
}

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

【问题讨论】：

标签： reactjs wysiwyg froala

【解决方案1】：

没关系，我刚刚开始工作。万一其他人遇到这个问题：

我加了

config={this.state.configs}

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

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
        }

【讨论】：