Question

我正在构建一个我希望包含froala编辑器的应用程序。我使用这些插件非常新，而且我遇到了麻烦＆＃34;翻译＆＃34;它到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：内联编辑

1 个答案: