代码之家 › 专栏 › 技术社区 › A.S.J

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

froala wysiwyg reactjs

1

A.S.J · 技术社区 · 8 年前

我正在构建一个应用程序,我想在其中包括froala编辑器。我对使用这些插件非常陌生,我很难将其“翻译”到ReactJS。我通读了Froala的ReactJS文档,然而,我似乎无法让它工作。

这是他们建议在 <div id="froala-editor"> :

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

将配置定义为变量也不起作用。有人能告诉我我做错了什么,什么是正确的方法吗?

1 回复 | 直到 8 年前

1

3

A.S.J 8 年前

没关系,我只是想让它发挥作用。如果其他人遇到此问题:

我补充道

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
        }